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

kont naf GruntJS mingħajr ma qatt użajtha imma kien ikolli nisma' mingħand żviluppatur Symfony agħtini l-quddiesa biex inħares lejn din is-soluzzjoni. L-ewwel, ibdel Assetiku par GruntJS kienet għalija soluzzjoni biex il-proġetti tiegħi jaħdmu Symfony ma HHVM. Issa s-server PHP de facebook jaħdem perfettament ma Assetiku imma dejjem insib inqas raġunijiet biex inkompli nuża Assetiku. Fl-aħħarnett, l-użu ta Grunt, plugin ibbażat fuq Nodi JS, imexxi l-biċċa l-kbira tal-iżviluppaturi biex jużaw Bowers, plugin ieħor għall-ġestjoni tad-dipendenzi. Se nitkellmu dwar Bowers aktar baxxi. Ejja nagħtu ħarsa malajr lejn il-vantaġġi u l-iżvantaġġi.

Attenzjoni! Qabel ma tibda temigra l-applikazzjoni tiegħek, nagħtik il-verżjoni tal-kodiċi tiegħek u tagħmel xi ttestjar. Huwa rakkomandat ħafna li taqra l-artiklu kollu qabel ma tibda din il-missjoni fit-tul.

sommarju

introduzzjoni

Assetic, il-ħabib ħażin

Min-naħa tiegħi, inqis liAssetiku huwa mifhum ħażin u użat ħażin. Jien se nispjegalkom il-ħsibijiet tiegħi. (Barra minn hekk, ikkoreġejt dan l-artiklu wara nuqqas ta’ ftehim min-naħa tiegħi, grazzi lil Manuel Klein għall-feedback tiegħu).

Benefiċċju

L-użu taAssetiku jippermettilek tikkanċella l-cache fuq ir-riżorsi minħabba li l-isem tar-riżorsi ġenerati JS u CSS jinbidel kull darba li tniedi l-kmand "assetic: dump”. Ċertu vantaġġ!

iżvantaġġi

Assetic joffri ftit għażliet biex jiġi kkonfigurat kif jiġu ġġenerati r-riżorsi.
Huwa meħtieġ li jiġu installati qatet PHP biex jiġġeneraw riżorsi eżotiċi bħal LESS. Il-kodiċi PHP huwa installat fil- Bejjiegħa filwaqt li dan il-kompitu huwa utli biss għall-klijent. Le għas-server. Barra minn hekk, iżid in-numru tal-proġett tiegħek.
Kodiċi PHP huwa meħtieġ fil- templates Zkuk użu Assetiku jew kważi kollha kemm huma. Filwaqt li ma 'Grunt, ir-riżors ikkumpilat se jissejjaħ bl-isem li tajtha.

Verament uża Assetic fil-mudelli tiegħek

Ħafna drabi nara fil- templates Zkuk li niltaqa' magħhom, riżorsi marbuta kultant permezz Assetiku, kultant permezz tal- assi de Sinfonija.

# L-użu ta 'Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Assetic mhux użat, bl-użu tal-Assi
/bundles/namespacemy/css/main.css

Fl-ewwel każ, Assetiku verament japplika. Fit-tieni każ, Assetiku hija kompletament moħbija sabiex ma tużax il- assi de Symfony. L-użu ta assi huwa wkoll żball fl-opinjoni tiegħi, għall-inqas għall-aċċess għar-riżorsi JS u CSS. Tmiem tal-parentesi...

Grunt JS il-kompilatur flessibbli Sooo!

GruntJS ibbażat fuq Node.js. Hija għodda fuq in-naħa tal-klijent li tuża moduli biex twettaq ħafna azzjonijiet bħall-konkatenazzjoni tal-fajls, minification, kompressjoni ta 'l-immaġini, kumpilazzjoni ta' LESS, TypeScript... B'differenza Assetiku, se jkollok twaqqaf ċerti konfigurazzjonijiet iżda sserraħ rasek, dan l-investiment inizjali jħallas u fl-aħħar mill-aħħar ħafna aktar malajr milliAssetiku.

Introduzzjoni għal Bower, il-composer.json tar-riżorsi

GruntJS huwa tajjeb u jiġi biex jitqiegħed fuq l-istess segment bħalAssetiku. Imma sakemm tuża Node.js, kif ukoll l-użu Bowers ! Huwa maniġer tad-dipendenza. Fi kliem sempliċi, inti tiddefinixxi r-riżorsi li għandek bżonn, "tali librerija f'tali verżjoni" u Bowers jieħu ħsieb li tikseb il-verżjoni li trid. Naturalment, bħal kompożitur.json għall PHP, tista 'żżid firxiet tal-verżjoni. Jekk trid librerija fil-verżjoni 3.3., *Bower se jkollok l-aħħar verżjoni disponibbli. Soluzzjoni biex taġġorna faċilment dawn ir-riżorsi. Problema rikorrenti fuq il-proġetti standard tagħna għaliex għandna (kellna!) tendenza li tniżżel verżjoni u qatt ma naġġornaha wara. Ma kellniex l-aġġornamenti minuri li kultant huma tant utli.

Teknikament, Bowers juża l-fajl bower.json. Is-sintassi tagħha hija sempliċi ħafna. Inħeġġiġkom biex tużah anke jekk tista' tkompli mingħajrha. Il-fajl jeħtieġ li jiġi verġjonat b'differenza mir-riżorsi li Bowers se jiġi download għalik. Biex tibda, jien ser nagħtik eżempju hawn taħt.

Verżjoni tar-riżorsi kkumpilati

Min-naħa tiegħi, kont ħadt id-drawwa li ma nbiddilx ir-riżorsi kkompilati tiegħi għalihom Assetiku imma ddeċidejt li nagħmel l-oppost għal GruntJS. Peress li nagħmel mingħajr riżorsi biex tmexxi minn Bowers (ara Introduzzjoni għal Bowers), se niġbor ir-riżorsi tiegħi u gitters. B'dan il-mod, nista' niskjera malajr l-applikazzjoni tiegħi. Qatt ma kelli feedback dwar din il-prattika iżda jidhirli rispettabbli għax żewġ operazzjonijiet huma kkanċellati fil-ħin tal-iskjerament (irkupru tar-riżorsi b' Bowers u jikkompila ma GruntJS), kif ukoll il-ħtieġa li jkun hemm Node.js fuq il-magna tiegħu.

Neħħi Assetic mill-proġett Symfony tagħna

Assetiku intgħażlet biex tkun il-komponent default responsabbli għall-kumpilazzjoni tar-riżorsi. Kun konxju li minkejja kollox, huwa faċli ħafna li titneħħa.

Ħassar Blokki Zkuk Tat-tip javascript et folja tal-istil. Mhumiex meħtieġa. Żomm il-ġenb il-fajls li kont qed tuża. Fil-futur, il-fajls li tixtieq tuża se jiġu definiti fil-fajl Gruntfile.js. Dan se narawh ftit aktar tard.

#app/config/config.yml
# Neħħi l-konfigurazzjoni minn assetic. Se jkun hemm ukoll xi wħud f'config_prod.yml, config_dev.yml u fajls oħra li jittellgħu
assetiku:
 debug: “%kernel.debug%”
 use_controller: falza
 gzuz: []
 filtri:
 cssrewrite: ~

#app/AppKernel.php
# Waqqaf it-tagħbija ta 'AsseticBundle billi tħassar il-linja mill-AppKernel
...
ġdid SymfonyBundleAsseticBundleAsseticBundle()
...

# composer.json
# Neħħi pakkett assetic
...
“symfony/asetic-bundle”: “~2.3”
...

Hemmhekk int iddiżattivajt Assetiku globalment. B'dan il-mod, m'għadhiex tistenna li ssib il-kmand assetic:dump et assetic:watch.

Kif se jaħdem Grunt JS fi ħdan il-proġett tagħna?

Ikollna nikkonfiguraw il-proġett tagħna bi tliet fajls:

package.json li se jippermettilna ninstallaw il-plugins Node.js (GruntJS u l-kontribuzzjonijiet tiegħu);
bower.json li tirrapporta dwar id-dipendenzi li jridu jiġu solvuti sabiex niġbru r-riżorsi tagħna;
Gruntfile.js li inti tkun qed taħdem fuqhom l-aktar. Se jkun fih l-azzjonijiet kollha possibbli u/jew li jridu jitwettqu biex jinġabru parti mill-proġett tiegħek jew kollu.

package.json biex tinstalla Grunt JS

{
"dipendenzi":{
"grunt": "^0.4.5",
"grunt-contrib-less": "~0.11.0",
“grunt-contrib-uglify”: "^0.6.0",
"tagħbija-grunt-kompiti": "^0.6.0"
},
"DevDipendenzi":{
"grunt": "^0.4.5"
}
}

L-ewwel, uża dan il-kontenut. Hija teħtieġ l-installazzjoni ta ' GruntJS u kontribuzzjonijiet, li tnejn minnhom (grunt-kontrib-inqas et grunt-kontrib-uggify) se jippermettilek tiġbor il-fajls u l-fajls JavaScript tiegħek Inqas.

bower.json biex issolvi d-dipendenzi tiegħi (bootstrap, font-awesome, ...)

{
"injora": [
“**/.*”,
“node_modules”,
“bower_components”,
"test",
"ttestjar"
],
"dipendenzi":{
"bootstrap": "3.3.*"
}
}

Hawnhekk huwa fajl minimu. Fil-każ tiegħi, tlabt li l-aħħar verżjoni tal-fergħa 3.3 ta ' Bootstrap jitniżżlu. B'mod awtomatiku, meta tagħmel a jinstallaw bower id-dipendenzi tiegħek se jiġu installati fil-folder bower_components. Permezz tal-użu ta .bowerrc tista 'tbiddel il-folder tad-destinazzjoni. Tista' ssib aktar informazzjoni fuq il-websajt ta' Bower.

1 2	# Installa dipendenzi billi tuża Bower $ bower jinstallaw

Gruntfile.js - Fejn jibda kollox

Il-kmandi u l-azzjonijiet kollha li tixtieq iżżid dak il-fatt fil-fajl Gruntfile.js. Fost affarijiet oħra, tista 'tiġbor fajls inqasscss et sass, ikkonkatena kwalunkwe tip ta 'fajls, ikkumpila TypeScript, jimminizzaw Fajls JavaScript, immaġini kif ukoll fajls HTML. Tista' wkoll tibdel id-daqs tal-immaġini u tikkopja fajls (bħal fonts).

Illum jien ser nuruk kif tiġbor il-fajls .anqas u jimminimizza l-fajls JS. Azzjonijiet li nwettaq kuljum u li jippermettuli llum nuża faċilment din jew dik il-parti bootstrap. Pjuttost milli tuża kollha ta ' bootstrap meta kulma għandek bżonn hu glyphicons, jista 'jkun interessanti li taħdem fuq librerija tad-dwana.

modulu.esportazzjonijiet= funzjoni (tgħaqqad) {
jeħtieġu('tagħbija-grunt-tasks')(grunt);
grunt.initConfig({
inqas:{
dist:{
għażliet:{
kkompressat: veru,
yuicompress: veru,
ottimizzazzjoni: 2
},
fajls:{
“web/css/main.css”: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
ikrah:{
għażliet:{
mangle: falza,
SourceMap: veru
},
dist:{
fajls:{
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('default'["anqas", "għożża"]);
};

Hawnhekk huwa fajl li jaħdem perfettament. Nużaha wkoll fuq proġett bi ftit qafas minħabba li huwa API. Assetiku kien fil-każ tiegħi pjuttost inutli. Għalhekk ipprefera nagħmel mingħajrha biex nuża għodda esterna għas-server u nwassal ir-riżorsi mibnija perfettament fil-ħin tal-iskjerament.

Ejja niddeskrivu l-azzjonijiet għal Gruntfile.js

Fil-fajl ta 'qabel, nikkonfigura ż-żewġ kontribuzzjonijiet ta' GruntJS (_inqas _u ikrah) li installajt grazzi għal tiegħi package.json. Tinduna li l-plugins huma faċilment distinti minn xulxin. Ħu l-każ tal-estensjoni inqas.

Kull kontribuzzjoni Grunt li se tuża trid tiġi ddikjarata permezz ta' keyword definita għall-kontribuzzjoni. Eżempju, għal grunt-kontrib-inqas il-kelma ewlenija hija inqas. Taħt din il-parti, tista 'tiddefinixxi miri. Taħt it-terminu mira jifhmu Subparti. F'każ konkret, nistgħu niddefinixxu a mira bootstrap biex tiġbor il-librerija tal-istess isem mis-sors inqas. Nistgħu niddefinixxu sett ieħor dist biex niġbru s-sorsi tal-proġett tagħna. L-użu ta’ diversi sottogruppi mhuwiex neċessità iżda jkollok l-opportunità li tużahom aktar tard meta tuża l- għassa tal-kontribuzzjoni biex tiffranka l-ħin.

Imbagħad l-istruttura tas-sottogruppi tal-istess estensjoni huma ISO. F'Contrario, l-istruttura ta' kull kontribuzzjoni tvarja. Kontribuzzjonijiet standard huma spiss ippreżentati b'ħafna eżempji. Plugins uffiċjali huma disponibbli fuq ir-repożitorju GitHub.

Ejja mmorru lura għall-eżempju tagħna u l-konfigurazzjoni tal-kumpilazzjoni tal-fajls tagħna .anqas. Fil-logħba fajls aħna nżidu l-isem tal-fajls finali bħala ċavetta, u bħala valur, firxa ta 'fajls ta' input biex niġbru. Naħseb li mhux meħtieġ li tingħata aktar dettall minħabba li s-sintassi hija pjuttost intuwittiva.

Il-kontribuzzjoni ikrah użat għall-konkatenazzjoni, minifikazzjoni u kompressjoni ta 'fajls JavaScript, juża l-istess struttura. F'dan il-każ, huwa pjuttost sempliċi li tuża ż-żewġ kontribuzzjonijiet tagħha.

L-arti tal-kumpilazzjoni

U issa compilons is-sorsi tagħna. Bil Assetiku, aħna nħaddmu dan il-kmand:

1	app/console php assetic:dump

Issa neħħejna AsseticBundle. M'għadniex għandna din l-ordni. Allura aħna ser imexxu l-plugin tagħna minn nodu.

tgħaqqad

Tara li għadu mhux ikkumplikat ħafna... F'dan il-każ, il-ħidmiet li se jiġu esegwiti se jkunu dawk mogħtija għall-profil awtomatikament. Ġie definit fl-aħħar linja.

1	grunt. registerTask('default'["anqas", "għożża"]);

Int tkun definit tajjeb ħafna profil javascript li ma kienx jesegwixxi ikrah.

1	grunt. registerTask('javascript'['tgħolli']);

Fil-każ li setgħet tmexxi l-kmand Grunt bl-isem tal-profil wara.

1	grunt javascript

Tista' tiddefinixxi kemm trid profili. Fil-każ tal-profil tiegħi javascript, l-interess huwa inqas għaliex inti tista 'wkoll għamilt is-sejħa li ġejja.

1	grunt ikrah

konklużjoni

Issa taf kif tiġbor ir-riżorsi tiegħek. Jekk ma fhimtx l-irqaqat kollha, malajr għandek tkun kapaċi tapprezza l-flessibbiltà kollha offruta minn Grunt fir-rigwardAssetiku. Barra minn hekk, apparti riżorsi tipiċi bħal javascript u css, tista’ wkoll tipproċessa fonts, stampi... Ass li malajr rebaħni.

Il-vantaġġ reali ta ' Grunt hija l-flessibbiltà tagħha l-użu tagħha. Grunt et Bowers bejniethom tinkorpora alternattiva għal Assetic. Mingħajr Bowers xorta tista' taħdem magħhom Grunt iżda l-esperjenza mhux se tkun totali.

Nittama li dan l-artikolu jippermettilek tifhem faċilment l-użu ta Grunt. Kun kuraġġuż, int kważi hemm!