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

věděl jsem GruntJS aniž bych to kdy používal, ale musel bych to slyšet od vývojáře Symfony dej mi hmotnost, abych se podíval na toto řešení. Nejprve vyměňte Assetic , vyrábí jej GruntJS bylo pro mě řešením, aby moje projekty fungovaly Symfony s HHVM. Nyní server PHP de Facebook funguje perfektně Assetic ale nacházím stále méně důvodů, proč v používání pokračovat Assetic. Konečně použití zachrochtání, plugin založený na Uzel JS, nutí většinu vývojářů používat Altánek, další plugin pro správu závislostí. Budeme mluvit o Altánek dolní. Pojďme se v rychlosti podívat na klady a zápory.

Pozornost ! Než začnete s migrací aplikace, doporučuji vám verzi kódu a provést nějaké testování. Důrazně doporučujeme přečíst si celý článek, než se pustíte do této dlouhodobé mise.

shrnutí

Úvod

Assetic, nepochopený přítel

Z mé strany to zvažujiAssetic je nepochopeno a zneužito. Vysvětlím vám své myšlenky. (Navíc jsem tento článek opravil po nedorozumění z mé strany, děkuji Manuelu Kleinovi za jeho zpětnou vazbu).

Výhoda

PoužitíAssetic umožňuje zrušit mezipaměť zdrojů, protože název generovaných zdrojů JS a CSS se mění při každém spuštění příkazu “assetic:dump”. Určitá výhoda!

nevýhody

Assetic nabízí několik možností konfigurace způsobu generování zdrojů.
Pro generování exotických zdrojů, jako je LESS, je nutné nainstalovat balíčky PHP. PHP kód je nainstalován v dodavatelé zatímco tento úkol je užitečný pouze pro klienta. Ne pro server. Navíc zvyšuje počet vašich projektů.
Kód PHP je nutné v šablony Větvička utilisant Assetic nebo skoro všechny. Zatímco u Gruntu bude zkompilovaný zdroj nazýván jménem, které jste mu dali.

Opravdu používejte Assetic ve svých šablonách

Často vidím v šablony Větvička na které narážím, zdroje propojené někdy přes Assetic, někdy přes aktiva de Symfonie.

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

v prvním případě Assetic skutečně platí. ve druhém případě Assetic je zcela skrytý, aby se nepoužil aktiva de Symfony. Použití aktiva je také podle mého názoru chyba, alespoň pro přístup ke zdrojům JS a CSS. Konec závorky...

Grunt JS sooo flexibilní kompilátor!

GruntJS na základě Node.js. Je to nástroj na straně klienta, který používá moduly k provádění mnoha akcí, jako je zřetězení souborů, minifikace, komprese obrázků, kompilace LESS, TypeScript… Na rozdíl od Assetic, budete muset nastavit určité konfigurace, ale buďte si jisti, že tato počáteční investice se vrátí a nakonec mnohem rychleji nežAssetic.

Úvod do Bowera, skladatele.json zdrojů

GruntJS je dobrý a umístí se do stejného segmentu jakoAssetic. Ale pokud používáte Node.js, stejně jako použití Altánek ! Je to správce závislostí. Jednoduše řečeno, definujete zdroje, které potřebujete, "taková knihovna v takové verzi" a Altánek se postará o získání požadované verze. Samozřejmě stejně jako skladatel.json pro PHP, můžete přidat rozsahy verzí. Pokud chcete knihovnu ve verzi 3.3., *Altánek získáte nejnovější dostupnou verzi. Řešení pro snadnou aktualizaci těchto zdrojů. Opakující se problém na našich standardních projektech, protože máme (měli jsme!) tendenci stahovat verzi a nikdy ji poté neaktualizovat. Neměli jsme drobné aktualizace, které jsou někdy tak užitečné.

Technicky Altánek používá soubor bower.json. Jeho syntaxe je velmi jednoduchá. Vyzývám vás, abyste jej používali, i když můžete pokračovat bez něj. Soubor bude muset mít verzi na rozdíl od zdrojů, které Altánek přijde stáhnout pro vás. Pro začátek vám uvedu příklad níže.

Verzování kompilovaných zdrojů

Pokud jde o mě, měl jsem ve zvyku neverzovat své zkompilované zdroje Assetic ale rozhodl jsem se udělat opak GruntJS. Vzhledem k tomu, že se obejdu bez prostředků, které bych mohl spravovat Altánek (viz Úvod do Altánek), sestavím své zdroje a gittery. Tímto způsobem mohu rychle nasadit svou aplikaci. Nikdy jsem neměl zpětnou vazbu na tento postup, ale zdá se mi to slušné, protože dvě operace jsou v době nasazení zrušeny (obnovení zdrojů pomocí Altánek a kompilovat s GruntJS), stejně jako potřeba mít Node.js na jeho stroji.

Odstraňte Assetic z našeho projektu Symfony

Assetic byl vybrán jako výchozí komponenta zodpovědná za kompilaci zdrojů. Uvědomte si, že navzdory všemu je velmi snadné odstranit.

Smazat bloky Větvička Typu javascript et stylu. Nejsou nutné. Ponechte stranou soubory, které jste používali. V budoucnu budou soubory, které chcete používat, definovány v souboru Gruntfile.js. To uvidíme o něco později.

#app/config/config.yml
# Odebrat konfiguraci z assetic. Některé budou také v souborech config_prod.yml, config_dev.yml a dalších nahraných souborech
assetic:
 ladit: "%kernel.debug%"
 use_controller: nepravdivý
 svazky: []
 filtry:
 cssrewrite: ~

#app/AppKernel.php
# Zastavte načítání AsseticBundle odstraněním řádku z AppKernel
...
nový SymfonyBundleAsseticBundleAsseticBundle()
...

# skladatel.json
# Odstraňte assettický balík
...
„symfony/assetic-bundle“: „~2.3“
...

Tady to máte, máte deaktivováno Assetic globálně. Tímto způsobem již neočekávejte nalezení příkazu assetic:dump et assetic:hodinky.

Jak bude Grunt JS fungovat v rámci našeho projektu?

Budeme muset nakonfigurovat náš projekt se třemi soubory:

balíček.json což nám umožní nainstalovat pluginy Node.js (GruntJS a jeho příspěvky);
bower.json hlásit závislosti, které je třeba vyřešit, abychom mohli sestavit naše zdroje;
Gruntfile.js na kterém budete nejvíce pracovat. Bude obsahovat všechny akce, které jsou možné a/nebo které mají být provedeny pro sestavení části nebo celého vašeho projektu.

package.json k instalaci Grunt JS

{
"závislosti": {
"bručet": "^0.4.5",
„bez chroptění-méně“: "~0.11.0",
„bručet-přispívat-oškličovat“: "^0.6.0",
"načíst-grunt-úkoly": "^0.6.0"
},
"devDependencies": {
"bručet": "^0.4.5"
}
}

Nejprve použijte tento obsah. Vyžaduje instalaci GruntJS a příspěvky, z nichž dva (grunt-contrib-less et chrochtat-přispívat-ošklivit) vám umožní kompilovat vaše soubory a soubory JavaScriptu Méně.

bower.json k vyřešení mých závislostí (bootstrap, font-awesome, …)

{
"ignorovat": [
"**/.*",
"moduly_uzlů",
"bower_components",
"Test",
"testování"
],
"závislosti": {
"bootstrap": "3.3.*"
}
}

Zde je minimální soubor. V mém případě jsem požadoval nejnovější verzi větve 3.3 Bootstrap být stažen. Ve výchozím nastavení, když uděláte a instalovat altánek vaše závislosti se nainstalují do složky bower_components. Prostřednictvím použití .bowerrc můžete změnit cílovou složku. Více informací najdete na Bowerově webu.

1 2	# Nainstalujte závislosti pomocí Bower $ instalace altánek

Gruntfile.js – Kde to všechno začíná

Všechny příkazy a akce, které chcete přidat, tuto skutečnost do souboru Gruntfile.js. Mimo jiné můžete kompilovat soubory méněcss et Sass, zřetězit jakýkoli druh souborů, zkompilovat TypeScript, minifikovat Soubory JavaScript, obrázky i soubory HTML. Můžete také měnit velikost obrázků a kopírovat soubory (jako jsou písma).

Dnes vám jen ukážu, jak kompilovat soubory .méně a minifikovat soubory . Js. Akce, které provádím každý den a které mi dnes umožňují snadno používat tu či onu část bootstrap. Spíše než používat všechny bootstrap když vše, co potřebujete, je glyfikony, může být zajímavé pracovat na vlastní knihovně.

modul.exports= funkce (zachrochtání) {
vyžadovat('load-grunt-tasks')(bručení);
grunt.initConfig({
méně: {
dist: {
možnosti: {
komprimovat: pravdivý,
yuicompress: pravdivý,
optimalizace: 2
},
soubory: {
„web/css/main.css“: [
"bower_components/bootsrap/dist/css/bootstrap.css",
„src/Namespace/MyBundle/Resources/public/css/main.less“
]
}
}
},
zohyzdit: {
možnosti: {
mandl: nepravdivý,
zdrojová mapa: pravdivý
},
dist: {
soubory: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('výchozí', ["méně", "zohyzdit"]);
};

Zde je perfektně fungující soubor. Používám ho také na projektu s málem rám protože to je a API. Assetic byl v mém případě celkem zbytečný. Raději jsem se tedy obešel bez něj, abych použil nástroj mimo server a dodal perfektně sestavené zdroje v době nasazení.

Pojďme si popsat akce pro Gruntfile.js

V předchozím souboru nakonfiguruji dva příspěvky GruntJS (_méně _a zohyzdit), který jsem si nainstaloval díky svému balíček.json. Všimnete si, že pluginy jsou od sebe snadno odlišitelné. Vezměte si případ rozšíření méně.

Každý příspěvek zachrochtání které se chystáte použít, musí být deklarováno pomocí klíčového slova definovaného pro příspěvek. Příklad, pro grunt-contrib-less klíčové slovo je méně. Pod touto částí můžeme definovat cíle. Pod pojmem cíl rozumět Podčást. V konkrétním případě bychom mohli definovat a cíl bootstrap zkompilovat stejnojmennou knihovnu ze zdroje méně. Mohli bychom definovat další sadu dist sestavit zdroje našeho projektu. Použití několika podmnožin není nutností, ale budete mít příležitost je použít později, když je použijete příspěvek sledovat ušetřit čas.

Struktura podmnožin stejného rozšíření je pak ISO. U Contrario se struktura každého příspěvku liší. Standardní příspěvky jsou často prezentovány s mnoha příklady. Oficiální pluginy jsou k dispozici v úložišti GitHub.

Vraťme se k našemu příkladu a konfiguraci kompilace našich souborů .méně. Ve hře soubory přidáme název finálních souborů jako klíč a jako hodnotu pole vstupních souborů ke kompilaci. Myslím, že není nutné více upřesňovat, protože syntaxe je docela intuitivní.

Příspěvek zohyzdit používá pro zřetězení, minifikaci a kompresi souborů JavaScript, používá stejnou strukturu. V tomto případě je docela jednoduché použít jeho dva příspěvky.

Umění sestavovat

A teď kompilons našich zdrojů. S Assetic, spustíme tento příkaz:

1	php aplikace/konzole assetic:dump

Nyní jsme odstranili AsseticBundle. Tuto objednávku již nemáme. Náš plugin tedy spustíme z Uzel.

1	zachrochtání

Vidíte, že to stále není příliš složité... V tomto případě budou úkoly, které budou provedeny, ty, které jsou zadány pro profil výchozí. Bylo to definováno v posledním řádku.

1	grunt. registerTask('výchozí', ["méně", "zohyzdit"]);

Velmi dobře byste definovali profil javascript kdo by nebyl popraven zohyzdit.

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

V případě, že jste mohli spustit příkaz zachrochtání s názvem profilu za.

1	grunt javascript

Můžete definovat tolik profilů, kolik chcete. V případě mého profilu javascript, zájem je menší, protože jste také mohli uskutečnit následující hovor.

1	chrochtat ošklivě

závěr

Nyní víte, jak sestavit své zdroje. Pokud jste nepochopili všechny jemnosti, měli byste rychle ocenit veškerou flexibilitu, kterou nabízí zachrochtání s ohledem naAssetic. Navíc kromě typických zdrojů jako javascript a css umíte zpracovávat i fonty, obrázky... Majetek, který si mě rychle získal.

Skutečná výhoda zachrochtání je jeho flexibilita jeho použití. zachrochtání et Altánek mezi nimi ztělesňuje alternativu k Assetic. Bez Altánek stále můžete pracovat zachrochtání ale zážitek to nebude úplný.

Doufám, že tento článek vám umožní snadno pochopit použití zachrochtání. Buďte odvážní, už jste skoro tam!