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

jag visste GruntJS utan att någonsin ha använt det men jag skulle ha behövt höra från en utvecklare Symfony ge mig massan så att jag tittar på den här lösningen. Byt först ut Assetic ens GruntJS var för mig en lösning för att få mina projekt att fungera Symfony avec HHVM. Nu servern PHP de Facebook fungerar perfekt med Assetic men jag hittar allt färre skäl att fortsätta använda Assetic. Slutligen, användningen av grunt, ett plugin baserat på Nod JS, driver de flesta utvecklare att använda Bower, ett annat plugin för att hantera beroenden. Vi kommer att prata om Bower lägre. Låt oss ta en snabb titt på för- och nackdelarna.

Uppmärksamhet! Innan du börjar migrera din applikation råder jag dig att versionera din kod och göra några tester. Det rekommenderas starkt att läsa hela artikeln innan du ger dig ut på detta långsiktiga uppdrag.

Sommaire

Beskrivning

Assetic, den missförstådda vännen

För min del anser jag detAssetic missförstås och missbrukas. Jag ska förklara mina tankar för dig. (Dessutom korrigerade jag den här artikeln efter ett missförstånd från min sida, tack vare Manuel Klein för hans feedback).

Fördel

Användningen avAssetic låter dig avbryta cachen på resurserna eftersom namnet på de genererade JS- och CSS-resurserna ändras varje gång du startar kommandot "assetic:dump”. En viss fördel!

nackdelar

Assetic erbjuder få alternativ för att konfigurera hur resurser genereras.
Det är nödvändigt att installera PHP-paket för att generera exotiska resurser som LESS. PHP-koden är installerad i försäljare medan denna uppgift bara är användbar för klienten. Nej för servern. Dessutom ökar det antalet av ditt projekt.
Koda PHP är nödvändigt i mallar Kvist utilisant Assetic eller nästan alla. Medan med Grunt kommer den kompilerade resursen att kallas för det namn du gav den.

Använd verkligen Assetic i dina mallar

Jag ser ofta i mallar Kvist som jag stöter på, resurser kopplade ibland via Assetic, ibland via tillgångar de Symfoni.

# Använder Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Oanvänd Assetic, med tillgångar
/bundles/namespacemy/css/main.css

I det första fallet, Assetic gäller verkligen. I det andra fallet, Assetic är helt dold för att inte använda tillgångar de Symfony. Användningen av tillgångar är också ett misstag enligt min mening, åtminstone för tillgång till JS- och CSS-resurser. Slut på parentes...

Grunt JS den sååå flexibla kompilatorn!

GruntJS baserat på node.js. Det är ett verktyg på klientsidan som använder moduler för att utföra många åtgärder som filsammansättning, minification, bildkomprimering, kompilering av LESS, TypeScript... Till skillnad från Assetic, du måste ställa in vissa konfigurationer men var säker, denna initiala investering kommer att löna sig och i slutändan mycket snabbare änAssetic.

Introduktion till Bower, resursernas composer.json

GruntJS är bra och kommer att placeras på samma segment somAssetic. Men så länge du använder node.js, samt använda Bower ! Det är en beroendehanterare. Enkelt uttryckt definierar du de resurser du behöver, "sådant bibliotek i sådan version" och Bower tar hand om att få den version du vill ha. Naturligtvis, precis som kompositör.json för PHP, kan du lägga till versionsintervall. Om du vill ha ett bibliotek i version 3.3., *Lövsal ger dig den senaste tillgängliga versionen. En lösning för att enkelt uppdatera dessa resurser. Ett återkommande problem på våra standardprojekt eftersom vi har (haft!) en tendens att ladda ner en version och aldrig uppdatera den i efterhand. Vi hade inte de mindre uppdateringarna som ibland är så användbara.

Tekniskt, Bower använder filen bower.json. Dess syntax är mycket enkel. Jag uppmanar dig att använda den även om du kan fortsätta utan den. Filen måste vara versionsversion till skillnad från resurserna som Bower kommer att ladda ner för dig. För att komma igång ska jag ge dig ett exempel nedan.

Versionering av kompilerade resurser

För min del hade jag fått för vana att inte versionera mina sammanställda resurser för Assetic men jag bestämde mig för att göra tvärtom GruntJS. Eftersom jag saknar resurser att klara mig efter Bower (se Introduktion till Bower), kommer jag att sammanställa mina resurser och gitters. På så sätt kan jag snabbt distribuera min applikation. Jag har aldrig fått feedback om denna praxis men det verkar respektabelt för mig eftersom två operationer avbryts vid tidpunkten för utplaceringen (återställning av resurser med Bower och kompilera med GruntJS), liksom behovet av att ha node.js på sin maskin.

Ta bort Assetic från vårt Symfony-projekt

Assetic valdes att vara standardkomponenten som ansvarar för att kompilera resurser. Tänk på att det trots allt är väldigt lätt att ta bort.

Ta bort block Kvist Av typ JavaScript et format. De är inte nödvändiga. Lägg åt sidan filerna du använde. I framtiden kommer de filer du vill använda att definieras i filen Gruntfile.js. Det får vi se lite senare.

#app/config/config.yml
# Ta bort konfigurationen från assetic. Det kommer också att finnas några i config_prod.yml, config_dev.yml och andra uppladdade filer
assetic:
 felsöka: "%kernel.debug%"
 use_controller: falsk
 buntar: []
 filter:
 cssrewrite: ~

#app/AppKernel.php
# Sluta ladda AsseticBundle genom att ta bort raden från AppKernel
.
ny SymfonyBundleAsseticBundleAsseticBundle()
.

# composer.json
# Ta bort assetic bunt
.
"symfony/assetic-bundle": "~2.3"
.

Varsågod, du har avaktiverat Assetic globalt. På så sätt kan du inte längre förvänta dig att hitta kommandot assetic:dump et assetic:klocka.

Hur kommer Grunt JS att arbeta inom vårt projekt?

Vi måste konfigurera vårt projekt med tre filer:

package.json vilket gör att vi kan installera plugins node.js (GruntJS och hans bidrag);
bower.json att rapportera om beroenden som ska lösas för att sammanställa våra resurser;
Gruntfile.js som du kommer att arbeta mest med. Den kommer att innehålla alla åtgärder som är möjliga och/eller som ska utföras för att sammanställa delar av eller hela ditt projekt.

package.json för att installera Grunt JS

{
"beroenden"{
"grymta": "^0.4.5",
"grint-bidragslöst": "~0.11.0",
"grunt-bidra-fula": "^0.6.0",
"last-grunt-uppgifter": "^0.6.0"
},
"devDependencies"{
"grymta": "^0.4.5"
}
}

Använd först detta innehåll. Det kräver installation av GruntJS och bidrag, varav två (grymta-bidragslös et grymta-bidra-fula) låter dig kompilera dina JavaScript-filer och -filer Mindre.

bower.json för att lösa mina beroenden (bootstrap, font-awesome, …)

{
"ignorera": [
"**/.*",
"node_moduler",
"bower_components",
"testa",
"testning"
],
"beroenden"{
"bootstrap": "3.3.*"
}
}

Här är en minimal fil. I mitt fall begärde jag att den senaste versionen av 3.3-grenen av Bootstrap laddas ner. Som standard, när du gör en bower installation dina beroenden kommer att installeras i mappen bower_components. Genom användning av .bowerrc du kan ändra målmappen. Du kan hitta mer information på Bowers hemsida.

1 2	# Installera beroenden med Bower $ bower installation

Gruntfile.js – Där allt börjar

Alla kommandon och åtgärder du vill lägga till detta faktum i filen Gruntfile.js. Du kan bland annat kompilera filer lesscss et sass, sammanfoga alla typer av filer, kompilera MASKINSKRIVEN, minifierare JavaScript-filer, bilder samt HTML-filer. Du kan också ändra storlek på bilder och kopiera filer (som typsnitt).

Idag ska jag bara visa dig hur man kompilerar filer .mindre och förminska filer . Js. Åtgärder som jag genomför varje dag och som gör att jag idag enkelt kan använda den eller den delen av bootstrap. Istället för att använda alla bootstrap när allt du behöver är glyfikoner, kan det vara intressant att arbeta på ett anpassat bibliotek.

modul.exports= fungera (grunt) {
kräver("load-grunt-tasks")(grymta);
grunt.initConfig({
mindre{
dist{
alternativ{
komprimera: sann,
yuicompress: sann,
optimering: 2
},
filer{
"web/css/main.css": [
“bower_components/bootsrap/dist/css/bootstrap.css”,
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
fula{
alternativ{
mangrove: falsk,
sourceMap: sann
},
dist{
filer{
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('standard', ["mindre", "fula"]);
};

Här är en perfekt fungerande fil. Jag använder den också på ett projekt med lite ram eftersom det är en API. Assetic var i mitt fall ganska värdelös. Så jag föredrog att klara mig utan det för att använda ett verktyg utanför servern och leverera de perfekt konstruerade resurserna vid tidpunkten för driftsättningen.

Låt oss beskriva åtgärderna för Gruntfile.js

I föregående fil konfigurerade jag de två bidragen från GruntJS (_mindre _och fula) som jag installerade tack vare min package.json. Du kommer att märka att plugins lätt kan skiljas från varandra. Ta fallet med förlängningen mindre.

Varje bidrag grunt som du ska använda måste deklareras via ett nyckelord som definierats för bidraget. Exempel, för grymta-bidragslös nyckelordet är mindre. Under denna del kan vi definiera mål. Under termen mål förstå Subpart. I ett konkret fall skulle vi kunna definiera en mål bootstrap att kompilera biblioteket med samma namn från källan mindre. Vi skulle kunna definiera en annan uppsättning dist att sammanställa källorna till vårt projekt. Användningen av flera delmängder är inte en nödvändighet men du kommer att ha möjlighet att använda dem senare när du använder bidrag titta för att spara tid.

Då är strukturen för delmängderna i samma tillägg ISO. Hos Contrario skiljer sig strukturen för varje bidrag. Standardbidrag presenteras ofta med många exempel. Officiella plugins finns tillgängliga på GitHub-förrådet.

Låt oss gå tillbaka till vårt exempel och konfigurationen av kompileringen av våra filer .mindre. I spelet filer vi lägger till namnet på de slutliga filerna som en nyckel, och som ett värde, en uppsättning indatafiler att kompilera. Jag tror att det inte är nödvändigt att detaljera mer eftersom syntaxen är ganska intuitiv.

Bidraget fula används för sammanlänkning, minifiering och komprimering av JavaScript-filer, använder samma struktur. I det här fallet är det ganska enkelt att använda dess två bidrag.

Konsten att sammanställa

Och nu kompilons våra källor. Med Assetic, kör vi det här kommandot:

1	php app/konsol assetic:dump

Nu har vi tagit bort AsseticBundle. Vi har inte längre denna order. Så vi kommer att köra vårt plugin från Nod.

grunt

Du ser att det fortfarande inte är särskilt komplicerat... I det här fallet kommer uppgifterna som kommer att utföras att vara de som ges för profilen standard. Det definierades på sista raden.

1	grunt. registerTask('standard', ["mindre", "fula"]);

Du skulle ha definierat en profil mycket väl JavaScript som inte skulle ha avrättat fula.

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

Om du kunde ha kört kommandot grunt med profilnamnet efter.

1	grymta javascript

Du kan definiera hur många profiler du vill. När det gäller min profil JavaScript, intresset är mindre eftersom du också kunde ha ringt följande samtal.

1	grymta fula

Slutsats

Nu vet du hur du sammanställer dina resurser. Om du inte har förstått alla finesser borde du snabbt kunna uppskatta all flexibilitet som erbjuds av grunt med avseende påAssetic. Dessutom kan du förutom typiska resurser som javascript och css också bearbeta typsnitt, bilder... En tillgång som snabbt vann mig.

Den verkliga fördelen med grunt är dess flexibilitet dess användning. grunt et Bower mellan dem förkroppsligar ett alternativ till Assetic. Utan Bower du kan fortfarande arbeta med grunt men upplevelsen blir inte total.

Jag hoppas att den här artikeln gör att du enkelt kan förstå användningen av grunt. Var modig, du är nästan där!