Name: Agence Web Tremplin Numérique
Price range: $$$

tiesin GruntJS käyttämättä sitä, mutta minun olisi pitänyt kuulla kehittäjältä Symfony anna minulle massa, jotta voin tutkia tätä ratkaisua. Ensin vaihda Asettinen jopa GruntJS oli minulle ratkaisu saada projektini toimimaan Symfony kanssa HHVM. Nyt palvelin PHP de Facebook toimii täydellisesti Asettinen mutta löydän yhä vähemmän syitä jatkaa käyttöä Asettinen. Lopuksi käyttö Murahdus, laajennus, joka perustuu Solmu JS, saa useimmat kehittäjät käyttämään neitsytkammio, toinen laajennus riippuvuuksien hallintaan. Puhumme aiheesta neitsytkammio alempi. Katsotaanpa nopeasti hyviä ja huonoja puolia.

Huomio ! Ennen kuin aloitat sovelluksesi siirtämisen, suosittelen sinua versioimaan koodisi ja tekemään testejä. Koko artikkelin lukeminen ennen tämän pitkän aikavälin tehtävän aloittamista on erittäin suositeltavaa.

yhteenveto

esittely

Assetic, väärinymmärretty ystävä

Omalta osaltani olen sitä mieltäAsettinen ymmärretään väärin ja käytetään väärin. Selitän ajatukseni sinulle. (Lisäksi korjasin tämän artikkelin väärinkäsitykseni vuoksi, kiitos Manuel Kleinille hänen palautteestaan).

Hyöty

KäyttöAsettinen voit peruuttaa resurssien välimuistin, koska luotujen JS- ja CSS-resurssien nimet muuttuvat aina, kun käynnistät komennon "assetic:dump". Tietty etu!

haitat

Assetic tarjoaa muutamia vaihtoehtoja resurssien luonnin määrittämiseen.
On tarpeen asentaa PHP-paketit luodakseen eksoottisia resursseja, kuten VÄHEMMÄN. PHP-koodi on asennettu myyjät kun taas tämä tehtävä on hyödyllinen vain asiakkaalle. Ei palvelimelle. Lisäksi se lisää projektisi määrää.
Koodi PHP on tarpeen malleja Oksa utilisant Asettinen tai melkein kaikki. Gruntin tapauksessa käännettyä resurssia kutsutaan sillä nimellä, jonka annoit sille.

Käytä todella Asseticia malleissasi

Näen usein malleja Oksa joihin törmään, resursseja linkitetty joskus kautta Asettinen, joskus kautta varat de Sinfonia.

# Asseticin käyttö
@NamespaceMyBundle/Resources/public/css/main.css
# Käyttämätön Assetic, käyttämällä omaisuutta
/bundles/namespacemy/css/main.css

Ensimmäisessä tapauksessa Asettinen todella pätee. Toisessa tapauksessa Asettinen on täysin piilossa, jotta sitä ei käytetä varat de Symfony. Käyttö varat on myös mielestäni virhe, ainakin JS- ja CSS-resurssien pääsyssä. Sulujen loppu...

Grunt JS on niin joustava kääntäjä!

GruntJS perustuen Node.js. Se on asiakaspuolen työkalu, joka käyttää moduuleja moniin toimiin, kuten tiedostojen yhdistämiseen, kutistaminen, kuvan pakkaus, VÄHEMMÄN kokoelma, TypeScript… Toisin kuin Asettinen, sinun on määritettävä tietyt kokoonpanot, mutta voit olla varma, tämä alkuinvestointi maksaa itsensä takaisin ja lopulta paljon nopeammin kuinAsettinen.

Johdatus Boweriin, resurssien composer.json-tiedostoon

GruntJS on hyvä ja sijoitetaan samaan segmenttiin kuinAsettinen. Mutta niin kauan kuin käytät Node.js, myös käyttää neitsytkammio ! Se on riippuvuusvastaava. Yksinkertaisesti sanottuna määrittelet tarvitsemasi resurssit, "sellaisen kirjaston sellaisessa versiossa" ja neitsytkammio huolehtii haluamasi version hankkimisesta. Tietysti ihan kuten composer.json varten PHP, voit lisätä versioalueita. Jos haluat kirjaston versiossa 3.3., *Kaveri saat uusimman version saatavilla. Ratkaisu näiden resurssien päivittämiseen helposti. Toistuva ongelma vakioprojekteissamme, koska meillä on (oli!) taipumus ladata versio eikä koskaan päivittää sitä jälkeenpäin. Meillä ei ollut pieniä päivityksiä, jotka joskus olisivat niin hyödyllisiä.

Teknisesti, neitsytkammio käyttää bower.json-tiedostoa. Sen syntaksi on hyvin yksinkertainen. Kehotan sinua käyttämään sitä, vaikka voit jatkaa ilman sitä. Tiedosto on versioitava toisin kuin resurssit neitsytkammio tulee lataamaan puolestasi. Päästäksesi alkuun, annan sinulle esimerkin alla.

Käytettyjen resurssien versiointi

Omalta osaltani olin tottunut olemaan versioimatta keräämiäni resursseja varten Asettinen mutta päätin tehdä päinvastoin GruntJS. Koska minulla ei ole resursseja hallita neitsytkammio (katso Johdanto neitsytkammio), kokoan resurssit ja gitterit. Tällä tavalla voin ottaa sovellukseni nopeasti käyttöön. En ole koskaan saanut palautetta tästä käytännöstä, mutta se vaikuttaa minusta kunnioitettavalta, koska kaksi operaatiota peruutetaan käyttöönoton yhteydessä (resurssien palautus neitsytkammio ja koota kanssa GruntJS), sekä tarve saada Node.js hänen koneessaan.

Poista Assetic Symfony-projektistamme

Asettinen valittiin oletuskomponentiksi, joka vastaa resurssien kokoamisesta. Muista, että kaikesta huolimatta se on erittäin helppo poistaa.

Poista lohkot Oksa Tyypin javascript et tyylisivu. Ne eivät ole välttämättömiä. Pidä käyttämäsi tiedostot sivussa. Jatkossa tiedostot, joita haluat käyttää, määritellään tiedostossa Gruntfile.js. Se nähdään vähän myöhemmin.

#app/config/config.yml
# Poista kokoonpano asseticista. Niitä on myös tiedostoissa config_prod.yml, config_dev.yml ja muissa ladatuissa tiedostoissa
asettinen:
 debug: "%kernel.debug%"
 use_controller: väärä
 niput: []
 suodattimet:
 cssrewrite: ~

#app/AppKernel.php
# Lopeta AsseticBundlen lataaminen poistamalla rivi AppKernelista
...
uusi SymfonyBundleAsseticBundleAsseticBundle()
...

# säveltäjä.json
# Poista omalaatuinen nippu
...
"symfony/assetic-bundle": "~2.3"
...

Noniin, olet poistanut käytöstä Asettinen maailmanlaajuisesti. Tällä tavalla älä enää odota löytäväsi komentoa assetic:dump et assetic:watch.

Miten Grunt JS toimii projektissamme?

Meidän on määritettävä projektimme kolmella tiedostolla:

package.json jonka avulla voimme asentaa laajennukset Node.js (GruntJS ja hänen panoksensa);
bower.json raportoida ratkaistavissa olevista riippuvuuksista resurssien kokoamiseksi;
Gruntfile.js jonka parissa työskentelet eniten. Se sisältää kaikki mahdolliset ja/tai suoritettavat toimet osan tai koko projektisi kokoamiseksi.

package.json Grunt JS:n asentamiseen

{
"riippuvuudet": {
"nurittaa": "^0.4.5",
“grunt-contrib-less”: "~0.11.0",
"murta-avusta-ilkeä": "^0.6.0",
"load-grunt-tehtävät": "^0.6.0"
},
"Dependencies": {
"nurittaa": "^0.4.5"
}
}

Käytä ensin tätä sisältöä. Se vaatii asennuksen GruntJS ja maksut, joista kaksi (murista-panosta-vähemmän et mura-avusta-ilkeä) avulla voit kääntää JavaScript-tiedostoja ja -tiedostoja Vähemmän.

bower.json ratkaisemaan riippuvuuksiani (bootstrap, font-awesome,…)

{
"jättää huomiotta": [
"**/.*",
"solmu_moduulit",
"bower_components",
"testi",
"testaus"
],
"riippuvuudet": {
"bootstrap": "3.3.*"
}
}

Tässä on minimitiedosto. Minun tapauksessani pyysin, että uusin versio 3.3 haarasta Bootstrap ladata. Oletuksena, kun teet a kaapin asennus riippuvuutesi asennetaan kansioon bower_components. Käytön kautta .bowerrc voit vaihtaa kohdekansiota. Löydät lisätietoja Bowerin verkkosivuilta.

1 2	# Asenna riippuvuudet Bowerin avulla $ bower asennus

Gruntfile.js – Mistä kaikki alkaa

Kaikki komennot ja toiminnot, jotka haluat lisätä tiedostoon Gruntfile.js. Voit muun muassa koota tiedostoja vähemmäncss et nenäkkyys, ketjuttaa kaikenlaisia tiedostoja, kääntää konekirjoitusteksti, pienentää JavaScript-tiedostoja, kuvia sekä HTML-tiedostoja. Voit myös muuttaa kuvien kokoa ja kopioida tiedostoja (kuten fontteja).

Tänään aion vain näyttää, kuinka tiedostoja kootaan .Vähemmän ja pienennä tiedostoja . Js. Toimet, joita teen päivittäin ja joiden avulla voin nykyään käyttää helposti tätä tai toista osaa bootstrap. Sen sijaan, että käyttäisit kaikkea bootstrap kun kaikki mitä tarvitset on glyfikonit, voi olla mielenkiintoista työskennellä mukautetun kirjaston parissa.

moduuli.exports= toiminto (murahdus) {
edellyttää('load-grunt-tehtävät')(murta);
grunt.initConfig({
vähemmän: {
dist: {
vaihtoehdot: {
puristaa: totta,
yuicompress: totta,
optimointi: 2
},
Tiedostojen: {
"web/css/main.css": [
"bower_components/bootsrap/dist/css/bootstrap.css",
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
rumaa: {
vaihtoehdot: {
mankeli: väärä,
lähdekartta: totta
},
dist: {
Tiedostojen: {
"web/js/main.js": [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('oletus'["Vähemmän", "ilkeä"])?
};

Tässä on täysin toimiva tiedosto. Käytän sitä myös projektissa vähällä kehys koska se on API. Asettinen oli minun tapauksessani melko hyödytön. Joten halusin tehdä ilman sitä käyttääkseni palvelimen ulkopuolista työkalua ja toimittaakseni täydellisesti rakennetut resurssit käyttöönoton yhteydessä.

Kuvataan Gruntfile.js:n toiminnot

Edellisessä tiedostossa määritän kaksi lisäystä GruntJS (_vähemmän _ja rumaa), jonka asensin minun ansiostani package.json. Huomaat, että laajennukset on helppo erottaa toisistaan. Ota laajennuksen tapaus vähemmän.

Jokainen panos Murahdus joita aiot käyttää, on ilmoitettava panokselle määritetyn avainsanan kautta. Esimerkki, varten murista-panosta-vähemmän avainsana on vähemmän. Tämän osan alla voimme määritellä tavoitteet. Termin alla tavoite ymmärtää Alaosa. Konkreettisessa tapauksessa voisimme määritellä a tavoite bootstrap kääntääksesi samannimisen kirjaston lähteestä vähemmän. Voisimme määritellä toisen joukon dist kokoamaan projektimme lähteet. Useiden osajoukkojen käyttö ei ole välttämätöntä, mutta sinulla on mahdollisuus käyttää niitä myöhemmin, kun käytät panos katsella ajan säästämiseksi.

Tällöin saman laajennuksen osajoukkojen rakenne on ISO. Contrariossa kunkin panoksen rakenne on erilainen. Vakiopalautuksissa esitetään usein monia esimerkkejä. Viralliset laajennukset ovat saatavilla GitHub-arkistosta.

Palataanpa esimerkkiimme ja tiedostojemme kokoamisen kokoonpanoon .Vähemmän. Pelissä Tiedostojen lisäämme lopullisten tiedostojen nimet avaimeksi ja arvoksi joukon käännettäviä syöttötiedostoja. Mielestäni ei ole tarpeen kertoa tarkemmin, koska syntaksi on varsin intuitiivinen.

Osuus rumaa käytetään JavaScript-tiedostojen ketjuttamiseen, pienentämiseen ja pakkaamiseen, käyttää samaa rakennetta. Tässä tapauksessa on melko yksinkertaista käyttää sen kahta panosta.

Kokoamisen taito

Ja nyt kompilons lähteemme. Kanssa Asettinen, suoritamme tämän komennon:

1	php-sovellus/konsoli assetic:dump

Nyt olemme poistaneet AsseticBundle. Meillä ei ole enää tätä tilausta. Joten aiomme suorittaa laajennuksemme osoitteesta Solmu.

murahdus

Näet, se ei ole vieläkään kovin monimutkaista... Tässä tapauksessa tehtävät suoritetaan profiilille annettuina oletus. Se määriteltiin viimeisellä rivillä.

1	grunt. registerTask('oletus'["Vähemmän", "ilkeä"])?

Sinulla olisi erittäin hyvin määritelty profiili javascript joka ei olisi teloittanut rumaa.

1	grunt. registerTask('javascript'['ilkeä'])?

Jos olisit voinut suorittaa komennon Murahdus profiilin nimen jälkeen.

1	mura javascript

Voit määrittää niin monta profiilia kuin haluat. Profiilini tapauksessa javascript, kiinnostus on pienempi, koska olisit voinut soittaa myös seuraavan puhelun.

1	murahtaa ilkeäksi

Yhteenveto

Nyt tiedät kuinka kokoa resurssit. Jos et ole ymmärtänyt kaikkia hienouksia, sinun pitäisi nopeasti pystyä arvostamaan kaikkea joustavuutta, jota Murahdus kunnioittaenAsettinen. Lisäksi tyypillisten resurssien, kuten javascriptin ja css:n, lisäksi voit myös käsitellä kirjasimia, kuvia... Valtuus, joka voitti minut nopeasti.

Todellinen etu Murahdus on sen joustavuus sen käyttöä. Murahdus et neitsytkammio Niiden välillä on vaihtoehto Asseticille. Ilman neitsytkammio voit silti työskennellä Murahdus mutta kokemus ei ole täydellinen.

Toivon, että tämän artikkelin avulla voit helposti ymmärtää käytön Murahdus. Ole rohkea, olet melkein perillä!