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

vedel som GruntJS bez toho, aby som to niekedy použil, ale musel by som to počuť od vývojára Symfony dajte mi hmotu, aby som sa pozrel na toto riešenie. Najprv vymeňte Assetic odsek GruntJS bolo pre mňa riešením, aby moje projekty fungovali Symfony s HHVM. Teraz server PHP de facebook funguje perfektne Assetic ale nachádzam stále menej dôvodov, prečo pokračovať v používaní Assetic. Nakoniec použitie zachrochtání, plugin založený na Uzol JS, núti väčšinu vývojárov používať altánok, ďalší plugin na správu závislostí. Budeme hovoriť o altánok nižšie. Poďme sa rýchlo pozrieť na výhody a nevýhody.

Pozor ! Skôr ako začnete migrovať svoju aplikáciu, odporúčam vám verziu kódu a vykonanie testov. Dôrazne sa odporúča prečítať si celý článok predtým, ako sa pustíte do tejto dlhodobej misie.

Sommaire

úvod

Assetic, nepochopený priateľ

Z mojej strany to považujemAssetic je nepochopený a zneužitý. Vysvetlím vám svoje myšlienky. (Okrem toho som tento článok opravil po nedorozumení z mojej strany, ďakujem Manuelovi Kleinovi za jeho spätnú väzbu).

Výhoda

PoužitieAssetic umožňuje zrušiť vyrovnávaciu pamäť zdrojov, pretože názov generovaných zdrojov JS a CSS sa mení pri každom spustení príkazu “assetic:dump“. Určitá výhoda!

nevýhody

Assetic ponúka niekoľko možností na konfiguráciu spôsobu generovania zdrojov.
Na generovanie exotických zdrojov ako LESS je potrebné nainštalovať balíky PHP. PHP kód je nainštalovaný v dodávatelia pričom táto úloha je užitočná len pre klienta. Nie pre server. Okrem toho zvyšuje počet vašich projektov.
kód PHP je potrebné v šablóny Vetvička utilisant Assetic alebo takmer všetky. Zatiaľ čo v prípade Grunt sa zostavený zdroj bude nazývať menom, ktoré ste mu dali.

Naozaj používajte Assetic vo svojich šablónach

Často vidím v šablóny Vetvička na ktoré narážam, zdroje prepojené niekedy cez Assetic, niekedy cez aktíva de symfónia.

# Používanie Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Nepoužitý Assetic, pomocou Assets
/bundles/namespacemy/css/main.css

V prvom prípade Assetic naozaj platí. V druhom prípade Assetic je úplne skrytý, aby sa nepoužíval aktíva de Symfony. Použitie aktíva je tiež podľa mňa chyba, aspoň čo sa týka prístupu k zdrojom JS a CSS. Koniec zátvorky...

Grunt JS sooo flexibilný kompilátor!

GruntJS založené na Node.js. Je to nástroj na strane klienta, ktorý využíva moduly na vykonávanie mnohých akcií, ako je napríklad zreťazenie súborov, minifikace, kompresia obrázkov, kompilácia LESS, TypeScript... Na rozdiel od Assetic, budete musieť nastaviť určité konfigurácie, ale buďte si istí, že táto počiatočná investícia sa vráti a v konečnom dôsledku oveľa rýchlejšie akoAssetic.

Úvod do Bowera, skladateľa.json zdrojov

GruntJS je dobrý a umiestni sa na rovnaký segment akoAssetic. Ale pokiaľ používate Node.js, ako aj používať altánok ! Je to manažér závislostí. Zjednodušene povedané, definujete zdroje, ktoré potrebujete, „takúto knižnicu v takejto verzii“ a altánok sa postará o získanie požadovanej verzie. Samozrejme, len ako composer.json pre PHP, môžete pridať rozsahy verzií. Ak chcete knižnicu vo verzii 3.3., *Bower vám poskytne najnovšiu dostupnú verziu. Riešenie na jednoduchú aktualizáciu týchto zdrojov. Opakujúci sa problém na našich štandardných projektoch, pretože máme (mali sme!) tendenciu stiahnuť si verziu a nikdy ju potom neaktualizovať. Nemali sme drobné aktualizácie, ktoré sú niekedy také užitočné.

Technicky altánok používa súbor bower.json. Jeho syntax je veľmi jednoduchá. Vyzývam vás, aby ste ho používali, aj keď môžete pokračovať bez neho. Súbor bude musieť mať verziu na rozdiel od zdrojov, ktoré altánok príde stiahnuť pre vás. Na začiatok vám uvediem príklad nižšie.

Verzia kompilovaných zdrojov

Pokiaľ ide o mňa, mal som vo zvyku neverziovať svoje zostavené zdroje Assetic ale rozhodol som sa urobiť opak GruntJS. Keďže sa zaobídem bez prostriedkov, ktorými by som sa mohol riadiť altánok (pozri Úvod do altánok), zostavím svoje zdroje a gittery. Týmto spôsobom môžem rýchlo nasadiť svoju aplikáciu. Nikdy som nemal spätnú väzbu na tento postup, ale zdá sa mi to slušné, pretože dve operácie sú v čase nasadenia zrušené (obnovenie zdrojov pomocou altánok a kompilovať s GruntJS), ako aj potrebu mať Node.js na jeho stroji.

Odstráňte Assetic z nášho projektu Symfony

Assetic bol vybraný ako predvolený komponent zodpovedný za kompiláciu zdrojov. Uvedomte si, že napriek všetkému sa dá veľmi ľahko odstrániť.

Odstrániť bloky Vetvička Typu javascript et stylesheet. Nie sú potrebné. Odložte si súbory, ktoré ste používali. V budúcnosti budú v súbore definované súbory, ktoré by ste chceli použiť Gruntfile.js. To uvidíme o niečo neskôr.

#app/config/config.yml
# Odstráňte konfiguráciu z assetic. Niektoré budú aj v súboroch config_prod.yml, config_dev.yml a ďalších nahraných súboroch
assetic:
 ladiť: "%kernel.debug%"
 use_controller: nepravdivý
 zväzky: []
 filtre:
 cssrewrite: ~

#app/AppKernel.php
# Zastavte načítavanie AsseticBundle odstránením riadku z AppKernel
...
nový SymfonyBundleAsseticBundleAsseticBundle()
...

# skladateľ.json
# Odstráňte balík aktív
...
„symfony/assetic-bundle“: „~2.3“
...

Tu to máte, deaktivovali ste sa Assetic globálne. Týmto spôsobom už neočakávajte, že nájdete príkaz assetic:dump et assetic:hodinky.

Ako bude Grunt JS fungovať v rámci nášho projektu?

Budeme musieť nakonfigurovať náš projekt s tromi súbormi:

package.json čo nám umožní nainštalovať pluginy Node.js (GruntJS a jeho príspevky);
bower.json podávať správy o závislostiach, ktoré je potrebné vyriešiť, aby sme mohli zostaviť naše zdroje;
Gruntfile.js na ktorom budete najviac pracovať. Bude obsahovať všetky možné a/alebo potrebné akcie na zostavenie časti alebo celého vášho projektu.

package.json na inštaláciu Grunt JS

{
"závislosti"{
"vrčať": "^ 0.4.5",
“mrčanie-menej”: "~0.11.0",
„zavrčať-prispieť-oškliviť“: "^ 0.6.0",
„načítať-grunt-úlohy“: "^ 0.6.0"
},
"devDependencies"{
"vrčať": "^ 0.4.5"
}
}

Najprv použite tento obsah. Vyžaduje inštaláciu GruntJS a príspevky, z ktorých dva (grcať-prispievať-menej et grcať-prispievať-oškliviť) vám umožní kompilovať vaše súbory a súbory JavaScript Lesscss.

bower.json na vyriešenie mojich závislostí (bootstrap, font-awesome, ...)

{
"ignorovať": [
“**/.*”,
"moduly_uzlov",
"bower_components",
"test",
"testovanie"
],
"závislosti"{
"bootstrap": „3.3.*“
}
}

Tu je minimálny súbor. V mojom prípade som požiadal o najnovšiu verziu vetvy 3.3 Bootstrap byť stiahnutý. Štandardne, keď urobíte a altánok nainštalovať vaše závislosti sa nainštalujú do priečinka bower_components. Prostredníctvom použitia .bowerrc môžete zmeniť cieľový priečinok. Viac informácií nájdete na Bowerovej stránke.

1 2	# Nainštalujte závislosti pomocou Bower $ altánok nainštalovať

Gruntfile.js – Kde to všetko začína

Všetky príkazy a akcie, ktoré chcete pridať do súboru Gruntfile.js. Okrem iného môžete kompilovať súbory menejcss et sassi, zreťaziť akýkoľvek druh súborov, skompilovať strojopisom, minifikovať Súbory JavaScript, obrázky, ako aj súbory HTML. Môžete tiež zmeniť veľkosť obrázkov a kopírovať súbory (napríklad písma).

Dnes vám len ukážem, ako kompilovať súbory .menej a minifikovať súbory . Js. Akcie, ktoré vykonávam každý deň a ktoré mi dnes umožňujú jednoducho používať tú či onú časť bootstrap. Namiesto použitia všetkých bootstrap keď všetko, čo potrebujete, je glyfikóny, môže byť zaujímavé pracovať na vlastnej knižnici.

modul.exports= funkcie (zachrochtání) {
vyžadovať(„load-grunt-tasks“)(grunt);
grunt.initConfig({
menej{
dist{
možnosti{
komprimovať: pravdivý,
yuicompress: pravdivý,
optimalizácia: 2
},
súbory{
„web/css/main.css“: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
„src/Namespace/MyBundle/Resources/public/css/main.less“
]
}
}
},
zoškliviť{
možnosti{
mangeľ: nepravdivý,
zdrojová mapa: pravdivý
},
dist{
súbory{
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('default', ["menej", "škaredý"]);
};

Tu je perfektne fungujúci súbor. Používam ho aj na projekte s málom rám pretože je a API. Assetic bolo v mojom prípade úplne zbytočné. Preto som sa radšej zaobišiel bez neho, aby som použil externý nástroj pre server a dodal dokonale skonštruované zdroje v čase nasadenia.

Poďme si popísať akcie pre Gruntfile.js

V predchádzajúcom súbore som nakonfiguroval dva príspevky GruntJS (_menej _a zoškliviť), ktorý som si nainštaloval vďaka môjmu package.json. Všimnete si, že pluginy sa dajú od seba ľahko rozlíšiť. Vezmite si prípad rozšírenia menej.

Každý príspevok zachrochtání ktoré sa chystáte použiť, musí byť deklarované prostredníctvom kľúčového slova definovaného pre príspevok. Napríklad pre grcať-prispievať-menej kľúčové slovo je menej. V rámci tejto časti môžeme definovať ciele. Pod pojmom terč rozumieť podčasť. V konkrétnom prípade by sme mohli definovať a terč bootstrap skompilovať knižnicu s rovnakým názvom zo zdroja menej. Mohli by sme definovať inú množinu dist zostaviť zdroje nášho projektu. Použitie niekoľkých podmnožín nie je nutnosťou, ale budete mať možnosť ich použiť neskôr, keď ich použijete príspevok sledovať aby ste ušetrili čas.

Potom štruktúra podmnožín rovnakého rozšírenia je ISO. V Contrario sa štruktúra každého príspevku líši. Štandardné príspevky sú často prezentované s mnohými príkladmi. Oficiálne doplnky sú k dispozícii v úložisku GitHub.

Vráťme sa k nášmu príkladu a konfigurácii kompilácie našich súborov .menej. V hre súbory pridáme názov finálnych súborov ako kľúč a ako hodnotu pole vstupných súborov na kompiláciu. Myslím si, že nie je potrebné viac detailov, pretože syntax je celkom intuitívna.

Príspevok zoškliviť používa na zreťazenie, minifikáciu a kompresiu súborov JavaScript, používa rovnakú štruktúru. V tomto prípade je celkom jednoduché použiť jeho dva príspevky.

Umenie zostavovať

A teraz kompilons našich zdrojov. s Assetic, spustíme tento príkaz:

1	php aplikácia/konzola assetic:dump

Teraz sme odstránili AsseticBundle. Túto objednávku už nemáme. Náš plugin teda spustíme z Uzol.

1	zachrochtání

Vidíte, že to stále nie je príliš komplikované... V tomto prípade budú úlohy, ktoré sa vykonajú, tie, ktoré sú zadané pre profil default. Bolo to definované v poslednom riadku.

1	grunt. registerTask('default', ["menej", "škaredý"]);

Mali by ste veľmi dobre definovať profil javascript kto by nebol popravil zoškliviť.

1	grunt. registerTask('javascript', ['uglify']);

V prípade, že ste mohli spustiť príkaz zachrochtání s názvom profilu za ním.

1	grunt javascript

Môžete definovať toľko profilov, koľko chcete. V prípade môjho profilu javascript, záujem je menší, pretože ste mohli uskutočniť aj nasledujúci hovor.

1	grcať škaredo

záver

Teraz viete, ako zostaviť svoje zdroje. Ak ste nepochopili všetky jemnosti, mali by ste rýchlo oceniť všetku flexibilitu, ktorú ponúka zachrochtání s ohľadom naAssetic. Navyše okrem typických zdrojov ako javascript a css dokážete spracovať aj fonty, obrázky... Majetok, ktorý si ma rýchlo získal.

Skutočná výhoda zachrochtání je jeho flexibilita jeho použitie. zachrochtání et altánok medzi nimi stelesňuje alternatívu k Assetic. Bez altánok stále môžete pracovať zachrochtání ale zážitok nebude úplný.

Dúfam, že tento článok vám umožní ľahko pochopiť použitie zachrochtání. Buďte odvážni, už ste skoro tam!