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

stiam GruntJS fără să-l fi folosit vreodată, dar ar fi trebuit să aud de la un dezvoltator Symfony dă-mi masa ca să mă uit la această soluție. În primul rând, înlocuiți asetic de GruntJS a fost pentru mine o soluție pentru a-mi face proiectele să funcționeze Symfony cu HHVM. Acum serverul PHP de Facebook functioneaza perfect cu asetic dar găsesc din ce în ce mai puține motive pentru a continua să folosesc asetic. În cele din urmă, utilizarea de mormăit, un plugin bazat pe Nod JS, determină majoritatea dezvoltatorilor să utilizeze umbrar, un alt plugin pentru gestionarea dependențelor. Vom vorbi despre umbrar inferior. Să aruncăm o privire rapidă la argumentele pro și contra.

Atentie! Înainte de a începe migrarea aplicației, vă sfătuiesc să vă versiunea codului și să faceți câteva teste. Este recomandat să citiți întregul articol înainte de a vă angaja în această misiune pe termen lung.

rezumat

Introducere

Assetic, prietenul neînțeles

Din partea mea, consider astaasetic este greșit înțeles și folosit greșit. Îți voi explica gândurile mele. (În plus, am corectat acest articol în urma unei neînțelegeri din partea mea, mulțumesc lui Manuel Klein pentru feedback).

Beneficiu

Utilizareaasetic vă permite să anulați memoria cache a resurselor, deoarece numele resurselor JS și CSS generate se schimbă de fiecare dată când lansați comanda „asetic: dump”. Un anumit avantaj!

dezavantaje

Assetic oferă puține opțiuni pentru a configura modul în care sunt generate resursele.
Este necesar să instalați pachete PHP pentru a genera resurse exotice precum LESS. Codul PHP este instalat în furnizori în timp ce această sarcină este utilă doar pentru client. Nu pentru server. În plus, crește numărul proiectului dvs.
Cod PHP este necesar în şabloane Crenguţă utilisant asetic sau aproape toate. În timp ce cu Grunt, resursa compilată va fi numită după numele pe care i-ați dat-o.

Folosește cu adevărat Assetic în șabloanele tale

Văd adesea în şabloane Crenguţă pe care le întâlnesc, resurse legate uneori prin asetic, uneori prin intermediul bunuri de Simfonie.

# Folosind Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Assetic nefolosit, folosind Active
/bundles/namespacemy/css/main.css

În primul caz, asetic se aplica cu adevarat. În al doilea caz, asetic este complet ascuns pentru a nu folosi bunuri de Symfony. Utilizarea bunuri este și o greșeală în opinia mea, cel puțin pentru accesul la resursele JS și CSS. Sfarsitul parantezei...

Grunt JS compilatorul Sooo flexibil!

GruntJS bazat pe Node.js. Este un instrument la nivelul clientului care utilizează module pentru a efectua multe acțiuni, cum ar fi concatenarea fișierelor, minification, compresie imagini, compilare LESS, TypeScript... Spre deosebire de asetic, va trebui să setați anumite configurații dar fiți siguri, această investiție inițială va plăti și în final mult mai repede decâtasetic.

Introducere în Bower, compozitorul.json al resurselor

GruntJS este bun si ajunge sa fie plasat pe acelasi segment caasetic. Dar atâta timp cât folosești Node.js, precum și utilizarea umbrar ! Este un manager de dependență. Pentru a spune simplu, definiți resursele de care aveți nevoie, „o astfel de bibliotecă în această versiune” și umbrar are grijă să obțineți versiunea dorită. Desigur, la fel ca compozitor.json pentru PHP, puteți adăuga intervale de versiuni. Dacă doriți o bibliotecă în versiunea 3.3., *Bower vă va oferi cea mai recentă versiune disponibilă. O soluție pentru a actualiza ușor aceste resurse. O problemă recurentă în proiectele noastre standard, deoarece avem (avem!) tendința de a descărca o versiune și de a nu o actualiza niciodată. Nu am avut actualizările minore care uneori sunt atât de utile.

Tehnic, umbrar folosește fișierul bower.json. Sintaxa sa este foarte simplă. Vă îndemn să îl folosiți chiar dacă puteți continua fără el. Fișierul va trebui să fie versiuneat spre deosebire de resursele care umbrar va veni descărcat pentru tine. Pentru a începe, vă voi da un exemplu mai jos.

Versiunea resurselor compilate

Din partea mea, mi-am luat obiceiul de a nu versiunea resursele mele compilate pentru asetic dar am decis să fac invers pentru GruntJS. Din moment ce mă descurc fără resurse de care să mă descurc umbrar (vezi Introducere la umbrar), îmi voi compila resursele și gitters. În acest fel, îmi pot implementa rapid aplicația. Nu am avut niciodată feedback cu privire la această practică, dar mi se pare respectabil deoarece două operațiuni sunt anulate la momentul implementării (recuperarea resurselor cu umbrar și compilați cu GruntJS), precum și nevoia de a avea Node.js pe aparatul lui.

Eliminați Assetic din proiectul nostru Symfony

asetic a fost aleasă să fie componenta implicită responsabilă de compilarea resurselor. Fiți conștienți de faptul că, în ciuda tuturor, este foarte ușor de îndepărtat.

Șterge blocuri Crenguţă De tip JavaScript et stylesheet. Nu sunt necesare. Păstrați deoparte fișierele pe care le utilizați. În viitor, fișierele pe care doriți să le utilizați vor fi definite în fișier Gruntfile.js. Vom vedea asta puțin mai târziu.

#app/config/config.yml
# Eliminați configurația din assetic. Vor fi, de asemenea, unele în config_prod.yml, config_dev.yml și alte fișiere încărcate
asetic:
 depanare: „%kernel.debug%”
 use_controller: fals
 pachete: []
 filtre:
 cssrewrite: ~

#app/AppKernel.php
# Opriți încărcarea AsseticBundle ștergând linia din AppKernel
...
nou SymfonyBundleAsseticBundleAsseticBundle()
...

# composer.json
# Eliminați pachetul asetic
...
„symfony/asetic-bundle”: „~2.3”
...

Uite, te-ai dezactivat asetic la nivel global. În acest fel, nu vă mai așteptați să găsiți comanda asetic: dump et asetic:ceas.

Cum va funcționa Grunt JS în cadrul proiectului nostru?

Va trebui să ne configuram proiectul cu trei fișiere:

pachet.json ceea ce ne va permite să instalăm pluginurile Node.js (GruntJS și contribuțiile sale);
bower.json să raportăm dependențele de rezolvat pentru a compila resursele noastre;
Gruntfile.js la care vei lucra cel mai mult. Acesta va conține toate acțiunile posibile și/sau care urmează să fie efectuate pentru a compila parțial sau întreg proiectul dumneavoastră.

package.json pentru a instala Grunt JS

{
„dependențe”:{
„mormăie”: „^0.4.5”,
„fără contribuție de mormăit”: „~0.11.0”,
„grunt-contrib-uggify”: „^0.6.0”,
„încărcare-grunt-sarcini”: „^0.6.0”
},
„Dependențe de dezvoltare”:{
„mormăie”: „^0.4.5”
}
}

În primul rând, utilizați acest conținut. Necesită instalarea GruntJS și contribuții, dintre care două (mormăit-contribuție-mai puțin et mormăit-contrib-ugrif) vă va permite să compilați fișierele și fișierele JavaScript Mai puțin.

bower.json pentru a-mi rezolva dependențele (bootstrap, font-awesome, …)

{
"ignora": [
„**/.*”,
„module_noduri”,
„componente_bower”,
" Test ",
"testare"
],
„dependențe”:{
„bootstrap”: „3.3.*”
}
}

Iată un fișier minim. În cazul meu, am solicitat ca cea mai recentă versiune a ramurii 3.3 a Bootstrap fi descărcat. În mod implicit, când faceți o instalare bower dependențele tale vor fi instalate în folder bower_components. Prin utilizarea lui .bowerrc puteți schimba folderul de destinație. Puteți găsi mai multe informații pe site-ul lui Bower.

1 2	# Instalați dependențe folosind Bower $ instalare bower

Gruntfile.js – Unde începe totul

Toate comenzile și acțiunile pe care doriți să le adăugați în fișier Gruntfile.js. Printre altele, puteți compila fișiere mai putin et Sass, concatena orice tip de fișiere, compila manuscris dactilografiat, minifica Fișiere JavaScript, imagini precum și fișiere HTML. De asemenea, puteți redimensiona imaginile și puteți copia fișiere (cum ar fi fonturile).

Astăzi vă voi arăta cum să compilați fișiere .Mai puțin și reduceți fișierele .js. Acțiuni pe care le desfășoară în fiecare zi și care îmi permit astăzi să folosesc cu ușurință cutare sau cutare parte bootstrap. În loc să folosești toate bootstrap când tot ce ai nevoie este glificonuri, poate fi interesant să lucrați la o bibliotecă personalizată.

modul.exporturi= funcţie (mormăit) {
necesita(„încărcare-grunt-sarcini”)(mormăit);
grunt.initConfig({
mai puțin:{
dist:{
Opțiuni:{
comprima: adevărat,
yuicompress: adevărat,
optimizare: 2
},
fișiere:{
„web/css/main.css”: [
„bower_components/bootsrap/dist/css/bootstrap.css”,
„src/Namspace/MyBundle/Resources/public/css/main.less”
]
}
}
},
urâţi:{
Opțiuni:{
calandru: fals,
Harta sursă: adevărat
},
dist:{
fișiere:{
„web/js/main.js”: [
„src/Namspace/MyBundle/Resources/public/js/main.js”,
]
}
}
}
});
grunt. registerTask('Mod implicit', ["Mai puțin", "urâţi"]);
};

Iată un fișier perfect funcțional. Il folosesc si pe un proiect cu putin cadru pentru că este un API. asetic a fost în cazul meu destul de inutil. Așa că am preferat să mă descurc fără ea pentru a folosi un instrument extern serverului și a furniza resursele perfect construite în momentul implementării.

Să descriem acțiunile pentru Gruntfile.js

În fișierul anterior, configurez cele două contribuții ale GruntJS (_mai puțin _și urâţi) pe care l-am instalat datorită mea pachet.json. Veți observa că pluginurile se disting cu ușurință unele de altele. Luați cazul extinderii mai puțin.

Fiecare contribuție mormăit pe care urmează să-l utilizați trebuie să fie declarat printr-un cuvânt cheie definit pentru contribuție. De exemplu, pentru mormăit-contribuție-mai puțin cuvântul cheie este mai puțin. Sub această parte, putem defini obiective. Sub termen ţintă a intelege Subpartea. Într-un caz concret, am putea defini a ţintă bootstrap pentru a compila biblioteca cu același nume din sursă mai puțin. Am putea defini un alt set dist pentru a compila sursele proiectului nostru. Utilizarea mai multor subseturi nu este o necesitate, dar veți avea ocazia să le utilizați mai târziu când utilizați ceasul contribuției pentru a salva timp.

Apoi structura submulților aceleiași extensii sunt ISO. La Contrario, structura fiecărei contribuții diferă. Contribuțiile standard sunt adesea prezentate cu multe exemple. Pluginurile oficiale sunt disponibile în depozitul GitHub.

Să revenim la exemplul nostru și la configurația compilației fișierelor noastre .Mai puțin. In joc fișiere adăugăm numele fișierelor finale ca cheie, iar ca valoare, o matrice de fișiere de intrare de compilat. Cred că nu este necesar să detaliez mai mult pentru că sintaxa este destul de intuitivă.

Contributia urâţi folosit pentru concatenarea, minimizarea și compresia fișierelor JavaScript, folosește aceeași structură. În acest caz, este destul de simplu să folosești cele două contribuții ale sale.

Arta de a compila

Și acum compilons sursele noastre. Cu asetic, rulăm această comandă:

1	aplicație/consola php asetic:dump

Acum am scos AsseticBundle. Nu mai avem această comandă. Deci vom rula pluginul nostru de la Nod.

mormăit

Vezi ca tot nu e foarte complicat... In acest caz sarcinile care vor fi executate vor fi cele date pentru profil Mod implicit. A fost definit în ultima linie.

1	grunt. registerTask('Mod implicit', ["Mai puțin", "urâţi"]);

Ai fi definit foarte bine un profil JavaScript care nu ar fi executat urâţi.

1	grunt. registerTask(„javascript”, ['urâţi']);

În cazul în care ați fi putut rula comanda mormăit cu numele profilului după.

1	grunt javascript

Puteți defini câte profiluri doriți. In cazul profilului meu JavaScript, interesul este mai mic pentru că ai fi putut să faci și următorul apel.

1	mormăit urât

Concluzie

Acum știți cum să vă compilați resursele. Dacă nu ați înțeles toate subtilitățile, ar trebui să puteți aprecia rapid toată flexibilitatea oferită de mormăit cu privire laasetic. În plus, în afară de resursele tipice precum javascript și css, puteți procesa și fonturi, imagini... Un atu care m-a cucerit rapid.

Adevăratul avantaj al mormăit este flexibilitatea sa utilizarea sa. mormăit et umbrar între ele întruchipează o alternativă la Assetic. Fără umbrar mai poți lucra cu mormăit dar experiența nu va fi totală.

Sper că acest articol vă va permite să înțelegeți cu ușurință utilizarea mormăit. Fii curajos, aproape ai ajuns!