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

znao sam GruntJS a da ga nisam nikada koristio, ali morao bih se čuti s programerom Symfony daj mi masu da pogledam ovo rješenje. Prvo, zamijenite Assetic još GruntJS je za mene bilo rješenje da moji projekti funkcioniraju Symfony s HHVM. Sada poslužitelj PHP de Facebook radi savršeno sa Assetic ali nalazim sve manje razloga za nastavak korištenja Assetic. Na kraju, upotreba roktati, dodatak temeljen na Čvor JS, potiče većinu programera na korištenje sjenica, još jedan dodatak za upravljanje ovisnostima. Razgovarat ćemo o sjenica niži. Pogledajmo na brzinu prednosti i mane.

Pažnja ! Prije nego što započnete s migracijom svoje aplikacije, savjetujem vam da napravite verziju svog koda i izvršite neko testiranje. Preporučljivo je pročitati cijeli članak prije nego što se upustite u ovu dugoročnu misiju.

Sommaire

Uvod

Assetic, neshvaćeni prijatelj

Što se mene tiče, to smatramAssetic je krivo shvaćen i zloupotrijebljen. Objasnit ću vam svoje misli. (Osim toga, ispravio sam ovaj članak nakon nesporazuma s moje strane, zahvaljujući Manuelu Kleinu na povratnim informacijama).

Korist

KorištenjeAssetic omogućuje vam da otkažete predmemoriju resursa jer se naziv generiranih JS i CSS resursa mijenja svaki put kada pokrenete naredbu “assetic:dump”. Određena prednost!

nedostaci

Assetic nudi nekoliko opcija za konfiguriranje načina generiranja resursa.
Potrebno je instalirati PHP pakete za generiranje egzotičnih resursa kao što je LESS. PHP kod je instaliran u dobavljači dok je ovaj zadatak koristan samo za klijenta. Ne za poslužitelj. Osim toga, povećava broj vašeg projekta.
Kodirati PHP potrebno je u predlošci Grančica utilisant Assetic ili gotovo svi. Dok će s Gruntom kompajlirani resurs biti pozvan imenom koje ste mu dali.

Zaista koristite Assetic u svojim predlošcima

Često vidim u predlošci Grančica na koje naiđem, izvori ponekad povezani putem Assetic, ponekad putem imovina de Simfonija.

# Korištenje Assetica
@NamespaceMyBundle/Resources/public/css/main.css
# Neiskorišteni Assetic, koristeći Assets
/bundles/namespacemy/css/main.css

u prvom slučaju, Assetic stvarno vrijedi. U drugom slučaju, Assetic potpuno je skriven kako se ne bi koristio imovina de Symfony. Korištenje imovina također je pogreška po mom mišljenju, barem za pristup JS i CSS resursima. Kraj zagrade...

Grunt JS Sooo fleksibilan kompajler!

GruntJS na temelju Node.js. To je alat na strani klijenta koji koristi module za izvođenje mnogih radnji kao što su ulančavanje datoteka, Reduciranje, kompresija slika, kompilacija LESS-a, TypeScript… Za razliku od Assetic, morat ćete postaviti određene konfiguracije, ali budite uvjereni, ovo početno ulaganje će se isplatiti i na kraju puno brže odAssetic.

Uvod u Bower, composer.json resursa

GruntJS je dobar i dolazi u isti segment kao iAssetic. Ali sve dok koristite Node.js, kao i koristiti sjenica ! To je upravitelj ovisnosti. Jednostavno rečeno, definirate resurse koji su vam potrebni, "takva biblioteka u takvoj verziji" i sjenica brine se za dobivanje verzije koju želite. Naravno, baš kao composer.jso za PHP, možete dodati raspone verzija. Ako želite knjižnicu u verziji 3.3., *Bower dobit ćete najnoviju dostupnu verziju. Rješenje za jednostavno ažuriranje ovih resursa. Problem koji se ponavlja na našim standardnim projektima jer imamo (imali!) tendenciju preuzimanja verzije i nikad je nakon toga ne ažuriramo. Nismo imali manja ažuriranja koja su ponekad toliko korisna.

Tehnički, sjenica koristi datoteku bower.json. Sintaksa mu je vrlo jednostavna. Potičem vas da ga koristite čak i ako možete bez njega. Datoteka će morati imati verziju za razliku od resursa koji sjenica doći će preuzeti za vas. Da biste započeli, dat ću vam primjer u nastavku.

Versioniranje sastavljenih resursa

Što se mene tiče, stekao sam naviku ne verzirati svoje kompilirane resurse za Assetic ali odlučio sam učiniti suprotno za GruntJS. Budući da nemam sredstava za upravljanje sjenica (vidi Uvod u sjenica), sakupit ću svoje resurse i želudac. Na taj način mogu brzo implementirati svoju aplikaciju. Nikada nisam dobio povratne informacije o ovoj praksi, ali čini mi se vrijednom poštovanja jer su dvije operacije otkazane u trenutku postavljanja (oporavak resursa s sjenica i sastaviti sa GruntJS), kao i potrebu za posjedovanjem Node.js na svom stroju.

Uklonite Assetic iz našeg Symfony projekta

Assetic je odabran da bude zadana komponenta odgovorna za kompajliranje resursa. Imajte na umu da se unatoč svemu vrlo lako uklanja.

Izbriši blokove Grančica Od tipa javascript et stylesheet. Oni nisu potrebni. Držite po strani datoteke koje ste koristili. Ubuduće će datoteke koje želite koristiti biti definirane u datoteci Gruntfile.js. To ćemo vidjeti malo kasnije.

#app/config/config.yml
# Ukloni konfiguraciju iz assetic-a. Također će ih biti u config_prod.yml, config_dev.yml i drugim učitanim datotekama
sredstvo:
 debug: “%kernel.debug%”
 koristi_kontroler: lažan
 paketi: []
 filteri:
 cssrewrite: ~

#app/AppKernel.php
# Zaustavite učitavanje AsseticBundle brisanjem retka iz AppKernela
...
novi SymfonyBundleAsseticBundleAsseticBundle()
...

# skladatelj.json
# Uklonite skup sredstava
...
“symfony/assetic-bundle”: “~2.3”
...

Eto, deaktivirali ste se Assetic globalno. Na taj način više ne očekujte pronaći naredbu assetic:dump et assetic: sat.

Kako će Grunt JS funkcionirati unutar našeg projekta?

Morat ćemo konfigurirati naš projekt s tri datoteke:

paket.json što će nam omogućiti instaliranje dodataka Node.js (GruntJS i njegovi doprinosi);
bower.json za izvješćivanje o ovisnostima koje treba riješiti kako bismo sastavili naše resurse;
Gruntfile.js na čemu ćete najviše raditi. Sadržat će sve radnje koje je moguće i/ili koje treba izvršiti za kompajliranje dijela ili cijelog vašeg projekta.

package.json za instaliranje Grunt JS

{
“ovisnosti”:{
"roktati": “^0.4.5”,
“grunt-contrib-less”: “~0.11.0”,
“grunt-contrib-uglify”: “^0.6.0”,
“load-grunt-tasks”: “^0.6.0”
},
“devDependencies”:{
"roktati": “^0.4.5”
}
}

Prvo, koristite ovaj sadržaj. Zahtijeva instalaciju GruntJS i doprinose, od kojih dva (gunđati-pridonijeti-manje et gunđati-doprinijeti-pogrditi) omogućit će vam kompajliranje vaših JavaScript datoteka i datoteka Manje.

bower.json za rješavanje mojih ovisnosti (bootstrap, font-awesome, …)

{
"zanemariti": [
“**/.*”,
“moduli_čvora”,
“bower_components”,
"test",
"testiranje"
],
“ovisnosti”:{
"bootstrap": “3.3.*”
}
}

Ovdje je minimalna datoteka. U mom slučaju, zatražio sam najnoviju verziju 3.3 grane Bootstrap biti preuzet. Prema zadanim postavkama, kada učinite a bower instalirati vaše će se ovisnosti instalirati u mapu bower_components. Kroz korištenje .bowerrc možete promijeniti odredišnu mapu. Više informacija možete pronaći na Bowerovoj web stranici.

1 2	# Instalirajte ovisnosti koristeći Bower $ bower instalacija

Gruntfile.js – Gdje sve počinje

Sve naredbe i radnje koje želite dodati toj činjenici u datoteku Gruntfile.js. Između ostalog, možete sastaviti datoteke manjecss et Sass, spajanje bilo koje vrste datoteka, kompajliranje kucana kopija, umanjiti JavaScript datoteke, slike kao i HTML datoteke. Također možete promijeniti veličinu slika i kopirati datoteke (poput fontova).

Danas ću vam samo pokazati kako kompajlirati datoteke .manje i minimizirati datoteke . Js. Radnje koje provodim svaki dan i koje mi danas omogućuju da lako koristim ovaj ili onaj dio bootstrap. Umjesto korištenja svih bootstrap kada je sve što trebate glifikoni, moglo bi biti zanimljivo raditi na prilagođenoj biblioteci.

modul.izvozi= funkcija (roktati) {
zahtijevati('load-grunt-tasks')(roktati);
grunt.initConfig({
manje:{
dist:{
opcije:{
oblog: istinski,
yuicompress: istinski,
optimizacija: 2
},
slika:{
“web/css/main.css”: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
ružiti:{
opcije:{
komadati: lažan,
sourceMap: istinski
},
dist:{
slika:{
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
gunđanje. registerTask('zadano', ["manje", “pogrditi”]);
};

Ovdje je datoteka koja savršeno radi. Također ga koristim na projektu s malo okvir jer je a API. Assetic je u mom slučaju bila sasvim beskorisna. Stoga sam radije radio bez njega kako bih koristio alat izvan poslužitelja i isporučio savršeno konstruirane resurse u vrijeme postavljanja.

Opišimo akcije za Gruntfile.js

U prethodnoj datoteci konfigurirao sam dva doprinosa GruntJS (_manje _i ružiti) koji sam instalirao zahvaljujući svom paket.json. Primijetit ćete da se dodaci lako razlikuju jedni od drugih. Uzmimo slučaj produžetka manje.

Svaki doprinos roktati koju ćete koristiti morate deklarirati putem ključne riječi definirane za doprinos. Primjer, za gunđati-pridonijeti-manje ključna riječ je manje. Pod ovim dijelom možemo definirati ciljevi. Pod pojmom meta razumjeti Poddio. U konkretnom slučaju mogli bismo definirati a meta bootstrap za kompajliranje istoimene knjižnice iz izvora manje. Mogli bismo definirati još jedan skup dist sastaviti izvore našeg projekta. Upotreba nekoliko podskupova nije nužna, ali ćete ih imati priliku koristiti kasnije kada budete koristili doprinos sat da uštedi vrijeme.

Tada je struktura podskupova iste ekstenzije ISO. U Contrariju se struktura svakog doprinosa razlikuje. Standardni prilozi često su prikazani s mnogo primjera. Službeni dodaci dostupni su na GitHub repozitoriju.

Vratimo se našem primjeru i konfiguraciji kompilacije naših datoteka .manje. U igri slika dodajemo ime konačnih datoteka kao ključ, a kao vrijednost, niz ulaznih datoteka za prevođenje. Mislim da nije potrebno detaljizirati jer je sintaksa prilično intuitivna.

Doprinos ružiti koristi se za ulančavanje, smanjivanje i kompresiju JavaScript datoteka, koristi istu strukturu. U ovom slučaju, vrlo je jednostavno koristiti njegova dva doprinosa.

Umijeće sastavljanja

A sad kompilons naši izvori. S Assetic, pokrećemo ovu naredbu:

1	php aplikacija/konzola assetic:dump

Sada smo uklonili AsseticBundle. Više nemamo ovaj nalog. Dakle, pokrenut ćemo naš dodatak iz Čvor.

roktati

Vidite da još uvijek nije jako komplicirano... U ovom slučaju, zadaci koji će se izvršavati bit će zadani za profil zadano. Definirano je u zadnjem retku.

1	gunđanje. registerTask('zadano', ["manje", “pogrditi”]);

Imali biste vrlo dobro definiran profil javascript koji ne bi bio pogubio ružiti.

1	gunđanje. registerTask('javascript', ['pogrditi']);

U slučaju da ste mogli pokrenuti naredbu roktati s imenom profila nakon.

1	gunđati javascript

Možete definirati onoliko profila koliko želite. U slučaju mog profila javascript, interes je manji jer ste mogli napraviti i sljedeći poziv.

1	gunđati uglify

Zaključak

Sada znate kako sastaviti svoje resurse. Ako niste shvatili sve suptilnosti, trebali biste brzo moći cijeniti svu fleksibilnost koju nudi roktati s poštovanjemAssetic. Štoviše, osim tipičnih resursa kao što su javascript i css, također možete obrađivati fontove, slike... Sredstvo koje me brzo osvojilo.

Prava prednost roktati je njegova fleksibilnost njegova upotreba. roktati et sjenica između njih utjelovljuje alternativu Asseticu. Bez sjenica još uvijek možete raditi s roktati ali iskustvo neće biti potpuno.

Nadam se da će vam ovaj članak omogućiti da lakše razumijete upotrebu roktati. Budite hrabri, još malo pa ste stigli!