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

aš žinojau GruntJS niekada jo nenaudojęs, bet būčiau turėjęs išgirsti iš kūrėjo Symfony duok man masės, kad galėčiau pažvelgti į šį sprendimą. Pirma, pakeiskite Asetiškas nominali GruntJS man buvo sprendimas, kad mano projektai veiktų Symfony su HHVM. Dabar serveris PHP de Facebook puikiai veikia su Asetiškas bet randu vis mažiau priežasčių toliau naudoti Asetiškas. Galiausiai, naudojimas kriuksėti, papildinys, pagrįstas Mazgas JS, skatina daugumą kūrėjų naudoti Lenkėjas, kitas priklausomybių valdymo papildinys. Mes kalbėsime apie Lenkėjas žemesnė. Greitai pažvelkime į privalumus ir trūkumus.

Dėmesio! Prieš pradedant perkelti programą, patariu pakeisti kodo versiją ir atlikti kai kuriuos bandymus. Prieš pradedant šią ilgalaikę misiją, labai rekomenduojama perskaityti visą straipsnį.

santrauka

Įvadas

Asetikas, nesuprastas draugas

Savo ruožtu aš tai manauAsetiškas yra neteisingai suprastas ir netinkamai naudojamas. Aš jums paaiškinsiu savo mintis. (Be to, pataisiau šį straipsnį dėl mano nesusipratimo, dėkoju Manueliui Kleinui už atsiliepimą).

Nauda

PanaudojimasAsetiškas leidžia atšaukti išteklių talpyklą, nes sugeneruotų JS ir CSS išteklių pavadinimas keičiasi kiekvieną kartą paleidus komandą "assetinis: dump“. Tam tikras pranašumas!

trūkumai

Assetic siūlo keletą parinkčių, leidžiančių konfigūruoti, kaip generuojami ištekliai.
Norint sukurti egzotiškus išteklius, tokius kaip LESS, būtina įdiegti PHP paketus. PHP kodas yra įdiegtas Pardavėjai o ši užduotis naudinga tik klientui. Ne serveriui. Be to, tai padidina jūsų projekto skaičių.
Kodas PHP yra būtinas šablonai Smeigtukas using Asetiškas arba beveik visi. Tuo tarpu naudojant Grunt, sudarytas išteklius bus vadinamas vardu, kurį jam suteikėte.

Tikrai naudokite Assetic savo šablonuose

Dažnai matau šablonai Smeigtukas su kuriais susiduriu, šaltiniai kartais susieti per Asetiškas, kartais per aktyvai de Simfonija.

# Naudojant Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Nenaudojamas turtas, naudojant išteklius
/bundles/namespacemy/css/main.css

Pirmuoju atveju Asetiškas tikrai galioja. Antruoju atveju, Asetiškas yra visiškai paslėptas, kad nebūtų naudojamas aktyvai de Symfony. Panaudojimas aktyvai taip pat mano nuomone yra klaida, bent jau dėl prieigos prie JS ir CSS išteklių. Skliaustų pabaiga...

Grunt JS yra labai lankstus kompiliatorius!

GruntJS remiantis Node.js. Tai kliento įrankis, kuris naudoja modulius daugeliui veiksmų, tokių kaip failų sujungimas, atlikti, sumažinimu, vaizdo glaudinimas, LESS kompiliavimas, TypeScript… Kitaip nei Asetiškas, turėsite nustatyti tam tikras konfigūracijas, bet būkite tikri, ši pradinė investicija atsipirks ir galiausiai daug greičiau neiAsetiškas.

Bower, išteklių kompozitoriaus.json įvadas

GruntJS yra geras ir turi būti dedamas į tą patį segmentą kaipAsetiškas. Bet tol, kol naudosi Node.js, taip pat naudoti Lenkėjas ! Tai priklausomybės valdytojas. Paprasčiau tariant, jūs apibrėžiate jums reikalingus išteklius, „tokia biblioteka tokioje versijoje“ ir Lenkėjas pasirūpina, kad gautų norimą versiją. Žinoma, kaip ir kompozitorius.jsonas už PHP, galite pridėti versijų diapazonus. Jei norite bibliotekos 3.3 versijoje., *Buvo gausite naujausią versiją. Sprendimas, leidžiantis lengvai atnaujinti šiuos išteklius. Pasikartojanti problema mūsų standartiniuose projektuose, nes turime (turėjome!) tendenciją atsisiųsti versiją ir niekada jos neatnaujinti. Neturėjome smulkių atnaujinimų, kurie kartais būna tokie naudingi.

Techniškai, Lenkėjas naudoja failą bower.json. Jo sintaksė labai paprasta. Raginu jus naudoti, net jei galite ir be jo. Failo versija turi būti pakeista skirtingai nei ištekliai Lenkėjas ateis atsisiųsti už jus. Norėdami pradėti, toliau pateiksiu pavyzdį.

Surinktų išteklių versijų kūrimas

Savo ruožtu aš įpratau nedaryti versijų savo surinktų išteklių Asetiškas bet aš nusprendžiau pasielgti priešingai GruntJS. Kadangi apsieinu be resursų, kuriais galėčiau tvarkytis Lenkėjas (žr. Įvadą Lenkėjas), sukaupsiu savo išteklius ir kandikliai. Tokiu būdu galiu greitai įdiegti programą. Niekada negavau atsiliepimų apie šią praktiką, bet man tai atrodo garbinga, nes diegimo metu atšaukiamos dvi operacijos (išteklių atkūrimas naudojant Lenkėjas ir sukompiliuoti su GruntJS), taip pat būtinybė turėti Node.js ant jo mašinos.

Pašalinkite Assetic iš mūsų Symfony projekto

Asetiškas buvo pasirinktas kaip numatytasis komponentas, atsakingas už išteklių kompiliavimą. Žinokite, kad nepaisant visko, jį labai lengva pašalinti.

Ištrinti blokus Smeigtukas Tipo JavaScript et stilių lentelė. Jie nėra būtini. Laikykite nuošalyje failus, kuriuos naudojote. Ateityje failai, kuriuos norite naudoti, bus apibrėžti faile Gruntfile.js. Tai pamatysime šiek tiek vėliau.

#app/config/config.yml
# Pašalinkite konfigūraciją iš elementų. Kai kurie jų taip pat bus failuose config_prod.yml, config_dev.yml ir kituose įkeltuose failuose
asketiškas:
 derinti: „%kernel.debug%“
 use_controller: klaidingas
 ryšuliai: []
 filtrai:
 cssrewrite: ~

#app/AppKernel.php
# Sustabdykite „AsseticBundle“ įkėlimą ištrindami eilutę iš „AppKernel“.
...
Naujas produktas SymfonyBundleAsseticBundleAsseticBundle()
...

# kompozitorius.json
# Pašalinkite elementarų paketą
...
„symfony/assetic-bundle“: „~2.3“
...

Štai jūs išjungėte Asetiškas visame pasaulyje. Tokiu būdu nebesitikėkite rasti komandos assetinis: dump et assetinis:žiūrėti.

Kaip Grunt JS veiks mūsų projekte?

Savo projektą turėsime sukonfigūruoti trimis failais:

paketas.json kuri leis mums įdiegti papildinius Node.js (GruntJS ir jo indėlis);
bower.json pranešti apie priklausomybes, kurias reikia išspręsti, kad galėtume kaupti išteklius;
Gruntfile.js prie kurio dirbsite daugiausiai. Jame bus nurodyti visi galimi ir (arba) atliktini veiksmai, siekiant sudaryti dalį arba visą jūsų projektą.

package.json, kad įdiegtumėte Grunt JS

{
"priklausomybės": {
"niurzgti": „^0.4.5“,
„Nesvarbu-įnašu“: "~0.11.0",
„nerimti-prisidėti-bjaudyti“: „^0.6.0“,
„įkelti-grunt-užduotys“: „^0.6.0“
},
„Dependencies“: {
"niurzgti": „^0.4.5“
}
}

Pirmiausia naudokite šį turinį. Tam reikia įdiegti GruntJS ir įnašai, iš kurių du (niurzgėti-prisidėti-mažiau et niurzgėti-prisidėti-bauginti) leis jums kompiliuoti JavaScript failus ir failus Mažiau.

bower.json, kad išspręstumėte mano priklausomybes (bootstrap, font-awesome, ...)

{
"ignoruoti": [
„**/.*“,
„mazgas_moduliai“,
„bower_components“,
"testas",
"bandymas"
],
"priklausomybės": {
"bootstrap": „3.3.*“
}
}

Čia yra minimalus failas. Mano atveju, aš paprašiau, kad naujausia 3.3 filialo versija Bootstrap būti atsisiųstas. Pagal numatytuosius nustatymus, kai atliekate a palapinės montavimas jūsų priklausomybės bus įdiegtos aplanke bower_components. Naudojant .bowerrc galite pakeisti paskirties aplanką. Daugiau informacijos galite rasti Bower svetainėje.

1 2	# Įdiekite priklausomybes naudodami Bower $ bower įdiegti

Gruntfile.js – kur viskas prasideda

Visos komandos ir veiksmai, kuriuos norite įtraukti į failą Gruntfile.js. Be kita ko, galite kompiliuoti failus lesscss et sass, sujungti bet kokius failus, kompiliuoti „TypeScript“, sumažinti „JavaScript“ failai, vaizdai ir HTML failai. Taip pat galite pakeisti vaizdų dydį ir kopijuoti failus (pvz., šriftus).

Šiandien aš tiesiog parodysiu, kaip kompiliuoti failus .mažiau ir sumažinti failus . Js. Veiksmai, kuriuos atlieku kiekvieną dieną ir kurie šiandien man leidžia lengvai panaudoti tą ar kitą dalį bootstrap. Užuot naudoję visus bootstrap kai viskas ko tau reikia glifikonai, gali būti įdomu dirbti su pasirinktine biblioteka.

moduliai.eksportas= funkcija (kriuksėti) {
reikalauti('load-grunt-tasks')(murmėti);
grunt.initConfig({
mažiau: {
dist: {
galimybės: {
suspausti: tiesa,
yuicompress: tiesa,
optimizavimas: 2
},
failai: {
„web/css/main.css“: [
"bower_components/bootsrap/dist/css/bootstrap.css",
„src/Namespace/MyBundle/Resources/public/css/main.less“
]
}
}
},
bjaurėtis: {
galimybės: {
raištis: klaidingas,
šaltinio žemėlapis: tiesa
},
dist: {
failai: {
„web/js/main.js“: [
„src/Namespace/MyBundle/Resources/public/js/main.js“,
]
}
}
}
});
grunt. registerTask('numatytas'["mažiau", "bjaurėtis"]);
};

Čia yra puikiai veikiantis failas. Aš taip pat naudoju jį projekte su mažai kadras nes tai yra a API. Asetiškas mano atveju buvo visai nenaudingas. Taigi man labiau patiko apsieiti be jo, naudoti įrankį, esantį išoriniame serveryje, ir pristatyti tobulai sukonstruotus išteklius diegimo metu.

Aprašykime veiksmus su Gruntfile.js

Ankstesniame faile sukonfigūruoju du įnašus GruntJS (_mažiau _ir bjaurėtis), kurį įdiegiau savo dėka paketas.json. Pastebėsite, kad įskiepiai lengvai atskiriami vienas nuo kito. Paimkite pratęsimo atvejį mažiau.

Kiekvienas indėlis kriuksėti kuriuos ketinate naudoti, reikia deklaruoti naudojant įnašui apibrėžtą raktinį žodį. Pavyzdžiui, už niurzgėti-prisidėti-mažiau raktinis žodis yra mažiau. Pagal šią dalį galime apibrėžti tikslai. Pagal terminą taikinys suprasti Poskyris. Konkrečiu atveju galėtume apibrėžti a taikinys bootstrap sudaryti to paties pavadinimo biblioteką iš šaltinio mažiau. Galėtume apibrėžti kitą rinkinį dist sudaryti mūsų projekto šaltinius. Naudoti kelis poaibius nebūtina, bet turėsite galimybę juos naudoti vėliau, kai naudosite įnašo žiūrėti taupyti laiką.

Tada to paties plėtinio poaibių struktūra yra ISO. „Contrario“ kiekvieno įnašo struktūra skiriasi. Standartiniai įnašai dažnai pateikiami su daugybe pavyzdžių. Oficialūs papildiniai pasiekiami „GitHub“ saugykloje.

Grįžkime prie mūsų pavyzdžio ir failų kompiliavimo konfigūracijos .mažiau. Žaidime failai kaip raktą pridedame galutinių failų pavadinimus, o kaip reikšmę – įvesties failų masyvą, kurį reikia sudaryti. Manau, kad nereikia detalizuoti, nes sintaksė yra gana intuityvi.

Įnašas bjaurėtis naudojamas JavaScript failų sujungimui, sumažinimui ir glaudinimui, naudoja tą pačią struktūrą. Šiuo atveju gana paprasta naudoti du jo įnašus.

Kompiliavimo menas

O dabar kompilons mūsų šaltiniai. Su Asetiškas, vykdome šią komandą:

1	php programa/konsolė assetic:dump

Dabar mes pašalinome AsseticBundle. Šio užsakymo nebeturime. Taigi mes paleisime savo papildinį iš mazgas.

kriuksėti

Matote, tai vis tiek nėra labai sudėtinga... Šiuo atveju užduotys, kurios bus vykdomos, bus nurodytos profiliui numatytas. Jis buvo apibrėžtas paskutinėje eilutėje.

1	grunt. registerTask('numatytas'["mažiau", "bjaurėtis"]);

Turėtumėte labai gerai apibrėžtą profilį JavaScript kuris nebūtų įvykdęs bjaurėtis.

1	grunt. registerTask('javascript'["bjaurėtis"]);

Jei galėjote paleisti komandą kriuksėti su profilio pavadinimu po to.

1	grunt javascript

Galite nustatyti tiek profilių, kiek norite. Mano profilio atveju JavaScript, palūkanos mažesnės, nes taip pat galėjote paskambinti šiuo numeriu.

1	niurzgėti bjaurėtis

išvada

Dabar jūs žinote, kaip kaupti savo išteklius. Jei nesuvokėte visų subtilybių, turėtumėte greitai įvertinti visą lankstumą, kurį siūlo kriuksėti su pagarbaAsetiškas. Be to, be įprastų išteklių, tokių kaip javascript ir css, taip pat galite apdoroti šriftus, vaizdus... Turtas, kuris greitai mane užkariavo.

Tikrasis pranašumas kriuksėti yra jo lankstumas, jo naudojimas. kriuksėti et Lenkėjas tarp jų įkūnija alternatyvą Assetic. Be Lenkėjas vis tiek galite dirbti su kriuksėti bet patirtis nebus visiška.

Tikiuosi, kad šis straipsnis leis jums lengvai suprasti, kaip naudoti kriuksėti. Būkite drąsūs, jūs jau beveik ten!