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

e dija GruntJS pa e përdorur ndonjëherë, por do të më duhej të dëgjoja nga një zhvillues Symfony më jep masën që të shikoj këtë zgjidhje. Së pari, zëvendësoni Asetike par GruntJS ishte për mua një zgjidhje për të funksionuar projektet e mia Symfony me HHVM. Tani serveri PHP de Facebook punon perfekt me Asetike por gjej gjithnjë e më pak arsye për të vazhduar përdorimin Asetike. Së fundi, përdorimi i hungërimë, një shtojcë e bazuar në Nyja JS, i shtyn shumicën e zhvilluesve të përdorin Bowers, një tjetër shtojcë për menaxhimin e varësive. do të flasim për Bowers më të ulëta. Le të hedhim një vështrim të shpejtë në të mirat dhe të këqijat.

Kujdes! Përpara se të filloni të migroni aplikacionin tuaj, ju këshilloj të versiononi kodin tuaj dhe të bëni disa testime. Këshillohet fuqimisht të lexoni të gjithë artikullin përpara se të filloni këtë mision afatgjatë.

Sommaire

Prezantimi

Aseti, shoku i keqkuptuar

Nga ana ime e konsideroj këtëAsetike është keqkuptuar dhe keqpërdorur. Unë do t'ju shpjegoj mendimet e mia. (Përveç kësaj, e korrigjova këtë artikull pas një keqkuptimi nga ana ime, falë Manuel Klein për komentet e tij).

Përfitim

Perdorimi iAsetike ju lejon të anuloni cache në burime sepse emri i burimeve të gjeneruara JS dhe CSS ndryshon sa herë që filloni komandën "aset: hale”. Një avantazh i caktuar!

disavantazhet

Assetic ofron disa opsione për të konfiguruar se si gjenerohen burimet.
Është e nevojshme të instaloni paketat PHP për të gjeneruar burime ekzotike si LESS. Kodi PHP është i instaluar në shitësit ndërsa kjo detyrë është e dobishme vetëm për klientin. Jo për serverin. Përveç kësaj, rrit numrin e projektit tuaj.
Kodi PHP është e nevojshme në templates modë utilisant Asetike ose pothuajse të gjitha. Ndërsa me Grunt, burimi i përpiluar do të quhet me emrin që i keni dhënë.

Përdorni vërtet Assetic në shabllonet tuaja

Unë shpesh shoh në templates modë që unë has, burime të lidhura ndonjëherë nëpërmjet Asetike, ndonjëherë nëpërmjet Asetet de Simfonia.

# Përdorimi i Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Assetic i papërdorur, duke përdorur Asetet
/bundles/namespacemy/css/main.css

Në rastin e parë, Asetike vërtetë vlen. Në rastin e dytë, Asetike është plotësisht i fshehur në mënyrë që të mos përdoret Asetet de Symfony. Perdorimi i Asetet është gjithashtu një gabim për mendimin tim, të paktën për aksesin në burimet JS dhe CSS. Fundi i kllapave...

Grunt JS përpiluesi fleksibël Sooo!

GruntJS bazuar në Node.js. Është një mjet nga ana e klientit që përdor module për të kryer shumë veprime të tilla si lidhja e skedarëve, minification, ngjeshja e imazhit, kompilimi i LESS, TypeScript… Ndryshe Asetike, do t'ju duhet të vendosni konfigurime të caktuara, por të jeni të sigurt, ky investim fillestar do të shpërblehet dhe në fund shumë më shpejt seAsetike.

Hyrje në Bower, kompozitor.json i burimeve

GruntJS është i mirë dhe vjen për t'u vendosur në të njëjtin segment siAsetike. Por përderisa përdorni Node.js, si dhe përdorimi Bowers ! Është një menaxher varësie. Për ta thënë thjesht, ju përcaktoni burimet që ju nevojiten, "bibliotekë e tillë në një version të tillë" dhe Bowers kujdeset për marrjen e versionit që dëshironi. Sigurisht, ashtu si kompozitor.json për PHP, mund të shtoni vargjet e versioneve. Nëse dëshironi një bibliotekë në versionin 3.3., * Bower do t'ju marrë versionin më të fundit të disponueshëm. Një zgjidhje për të përditësuar me lehtësi këto burime. Një problem i përsëritur në projektet tona standarde sepse ne kemi (kishte!) një tendencë për të shkarkuar një version dhe për të mos e përditësuar kurrë më pas. Ne nuk kishim përditësime të vogla që ndonjëherë janë kaq të dobishme.

Teknikisht, Bowers përdor skedarin bower.json. Sintaksa e tij është shumë e thjeshtë. Ju nxis ta përdorni edhe nëse mund të vazhdoni pa të. Skedari do të duhet të versionohet ndryshe nga burimet që Bowers do të vijë shkarkimi për ju. Për të filluar, unë do t'ju jap një shembull më poshtë.

Versionimi i burimeve të përpiluara

Nga ana ime, e kisha bërë zakon të mos i modifikoja burimet e mia të përpiluara Asetike por vendosa të bëj të kundërtën për GruntJS. Që unë bëj pa burime për të menaxhuar nga Bowers (shih hyrjen në Bowers), Unë do të përpiloj burimet e mia dhe gërvishtje. Në këtë mënyrë, unë mund të vendos shpejt aplikacionin tim. Unë kurrë nuk kam pasur reagime për këtë praktikë, por më duket e respektueshme sepse dy operacione anulohen në momentin e vendosjes (rikuperimi i burimeve me Bowers dhe përpiloni me GruntJS), si dhe nevoja për të pasur Node.js në makinën e tij.

Hiq Assetic nga projekti ynë Symfony

Asetike u zgjodh të jetë komponenti i paracaktuar përgjegjës për përpilimin e burimeve. Kini parasysh se pavarësisht gjithçkaje, është shumë e lehtë për t'u hequr.

Fshi blloqet modë Të tipit javascript et stylesheet. Ato nuk janë të nevojshme. Mbani mënjanë skedarët që po përdorni. Në të ardhmen, skedarët që dëshironi të përdorni do të përcaktohen në skedar Gruntfile.js. Këtë do ta shohim pak më vonë.

#app/config/config.yml
# Hiqni konfigurimin nga asetiku. Do të ketë gjithashtu disa në config_prod.yml, config_dev.yml dhe skedarë të tjerë të ngarkuar
aseti:
 korrigjimi: "%kernel.debug%"
 use_controller: i rremë
 tufa: []
 filtra:
 cssrewrite: ~

#app/AppKernel.php
# Ndalo ngarkimin e AsseticBundle duke fshirë linjën nga AppKernel
...
i ri SymfonyBundleAsseticBundleAsseticBundle()
...

# kompozitor.json
# Hiq paketën e aseteve
...
"symfony/assetic-bundle": "~2.3"
...

Ja ku shkoni, jeni çaktivizuar Asetike globalisht. Në këtë mënyrë, mos prisni më të gjeni komandën aseti: hale et aseti: orë.

Si do të funksionojë Grunt JS në kuadër të projektit tonë?

Ne do të duhet të konfigurojmë projektin tonë me tre skedarë:

package.json e cila do të na lejojë të instalojmë shtojcat Node.js (GruntJS dhe kontributet e tij);
bower.json të raportojmë për varësitë që duhen zgjidhur për të përpiluar burimet tona;
Gruntfile.js për të cilën do të punoni më shumë. Ai do të përmbajë të gjitha veprimet e mundshme dhe/ose që do të kryhen për të përpiluar një pjesë ose të gjithë projektin tuaj.

package.json për të instaluar Grunt JS

{
"varësitë":{
"grimë": "^0.4.5",
"grunt-contrib-pak": "~0.11.0",
"grunt-kontribuoj-shembull": "^0.6.0",
"detyra ngarkuese-grithëse": "^0.6.0"
},
"Vvarësitë e devijimit":{
"grimë": "^0.4.5"
}
}

Së pari, përdorni këtë përmbajtje. Kërkon instalimin e GruntJS dhe kontributet, dy prej të cilave (grunt-kontribut-pak et rrënqeth-kontribuoj-shëmtuar) do t'ju lejojë të përpiloni skedarët dhe skedarët tuaj JavaScript Më pak.

bower.json për të zgjidhur varësitë e mia (bootstrap, font-wesome, ...)

{
"injoroj": [
"**/.*",
"node_modules",
"bower_components",
"test",
"duke testuar"
],
"varësitë":{
"bootstrap": "3.3.*"
}
}

Këtu është një skedar minimal. Në rastin tim, kam kërkuar që versioni më i fundit i degës 3.3 të Bootstrap të shkarkohet. Si parazgjedhje, kur bëni një instalimi i harkut varësitë tuaja do të instalohen në dosje komponentët_bower. Nëpërmjet përdorimit të .bowerrc mund të ndryshoni dosjen e destinacionit. Mund të gjeni më shumë informacion në faqen e internetit të Bower.

1 2	# Instaloni varësitë duke përdorur Bower $ instalimi i bowerit

Gruntfile.js – Ku fillon gjithçka

Të gjitha komandat dhe veprimet që dëshironi të shtoni këtë fakt në skedar Gruntfile.js. Ndër të tjera, ju mund të përpiloni skedarë më pak et SASS, bashkoni çdo lloj skedari, përpiloni TypeScript, minimizoj Skedarët JavaScript, imazhet si dhe skedarët HTML. Ju gjithashtu mund të ndryshoni madhësinë e imazheve dhe të kopjoni skedarë (si shkronjat).

Sot do t'ju tregoj se si të përpiloni skedarë .më pak dhe minimizoni skedarët .js. Veprimet që kryej çdo ditë dhe që më lejojnë sot të përdor lehtësisht këtë apo atë pjesë bootstrap. Në vend që të përdorni të gjitha bootstrap kur gjithçka që ju nevojitet është glifonikë, mund të jetë interesante të punosh në një bibliotekë të personalizuar.

Modulet.eksportet= funksion (hungërimë) {
kërkojnë('detyra ngarkuese-grithëse')(grimë);
grunt.initConfig({
më pak:{
Dist:{
opsione:{
ngjesh: i vërtetë,
yuicompress: i vërtetë,
optimization: 2
},
fotografi:{
"web/css/main.css": [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
shëmtuar:{
opsione:{
sakatoj: i rremë,
burim Harta: i vërtetë
},
Dist:{
fotografi:{
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. regjistrimTask('e parazgjedhur', ["më pak", "shëmtuar"]);
};

Këtu është një skedar që funksionon në mënyrë perfekte. Unë gjithashtu e përdor atë në një projekt me pak kornizë sepse është një API. Asetike në rastin tim ishte krejt i padobishëm. Kështu që unë preferova të bëj pa të për të përdorur një mjet të jashtëm të serverit dhe për të ofruar burimet e ndërtuara në mënyrë perfekte në kohën e vendosjes.

Le të përshkruajmë veprimet për Gruntfile.js

Në skedarin e mëparshëm, unë konfiguroj dy kontributet e GruntJS (_më pak _dhe shëmtuar) që kam instaluar falë tim package.json. Do të vini re se shtojcat dallohen lehtësisht nga njëri-tjetri. Merrni rastin e zgjatjes më pak.

Çdo kontribut hungërimë që do të përdorni duhet të deklarohet nëpërmjet një fjale kyçe të përcaktuar për kontributin. Për shembull, për grunt-kontribut-pak fjala kyçe është më pak. Nën këtë pjesë, ju mund të përcaktoni objektivat. Sipas termit objektiv kuptojnë Nënpjesa. Në një rast konkret, mund të përkufizojmë a objektiv bootstrap për të përpiluar nga burimi bibliotekën me të njëjtin emër më pak. Mund të përcaktojmë një grup tjetër Dist për të përpiluar burimet e projektit tonë. Përdorimi i disa nëngrupeve nuk është domosdoshmëri, por do të keni mundësinë t'i përdorni më vonë kur të përdorni shikojnë kontributin për të kursyer kohë.

Atëherë struktura e nëngrupeve të së njëjtës shtrirje janë ISO. Në Contrario, struktura e secilit kontribut ndryshon. Kontributet standarde shpesh paraqiten me shumë shembuj. Shtojcat zyrtare janë të disponueshme në depon e GitHub.

Le të kthehemi te shembulli ynë dhe konfigurimi i përpilimit të skedarëve tanë .më pak. Ne loje fotografi ne shtojmë emrin e skedarëve përfundimtarë si çelës, dhe si vlerë, një grup skedarësh hyrës për tu kompiluar. Unë mendoj se nuk është e nevojshme të detajohen më shumë sepse sintaksa është mjaft intuitive.

Kontributi shëmtuar përdoret për bashkimin, minifikimin dhe kompresimin e skedarëve JavaScript, përdor të njëjtën strukturë. Në këtë rast, është mjaft e thjeshtë të përdoren dy kontributet e tij.

Arti i përpilimit

Dhe tani kompilons burimet tona. Me Asetike, ne ekzekutojmë këtë komandë:

1	php app/console assetic:dump

Tani e kemi hequr Assetic Bundle. Ne nuk e kemi më këtë urdhër. Pra, ne do të ekzekutojmë shtojcën tonë nga Nyjë.

hungërimë

E shikoni ende nuk eshte shume e komplikuar... Ne kete rast detyrat qe do te ekzekutohen do te jene ato qe jepen per profilin. default. Ajo u përcaktua në rreshtin e fundit.

1	grunt. regjistrimTask('e parazgjedhur', ["më pak", "shëmtuar"]);

Do të kishit përcaktuar shumë mirë një profil javascript i cili nuk do të kishte ekzekutuar shëmtuar.

1	grunt. regjistrimTask('javascript', ['shëmtuar']);

Në rast se mund ta kishit ekzekutuar komandën hungërimë me emrin e profilit pas.

1	grunt javascript

Ju mund të përcaktoni sa më shumë profile që dëshironi. Në rastin e profilit tim javascript, interesi eshte me i vogel sepse mund te kishit bere edhe thirrjen e meposhtme.

1	gërmoj shëmtuar

përfundim

Tani ju e dini se si të përpiloni burimet tuaja. Nëse nuk i keni kuptuar të gjitha hollësitë, duhet të jeni në gjendje të vlerësoni shpejt të gjithë fleksibilitetin e ofruar nga hungërimë në lidhje meAsetike. Për më tepër, përveç burimeve tipike si javascript dhe css, ju mund të përpunoni edhe fontet, imazhet... Një aset që më fitoi shpejt.

Avantazhi i vërtetë i hungërimë është fleksibiliteti i tij përdorimi i tij. hungërimë et Bowers mes tyre mishëron një alternativë ndaj Assetic. pa Bowers ju ende mund të punoni me hungërimë por përvoja nuk do të jetë totale.

Shpresoj se ky artikull do t'ju lejojë të kuptoni lehtësisht përdorimin e hungërimë. Jini të guximshëm, ju jeni pothuajse aty!