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

Jeg vidste GruntJS uden nogensinde at have brugt det, men jeg ville have været nødt til at høre fra en udvikler Symfony giv mig massen, så jeg ser nærmere på denne løsning. Udskift først Assetisk takket være GruntJS var for mig en løsning til at få mine projekter til at fungere Symfony med HHVM. Nu serveren PHP de Facebook fungerer perfekt med Assetisk men jeg finder færre og færre grunde til at fortsætte med at bruge Assetisk. Endelig brugen af Grunt, et plugin baseret på Knude JS, driver de fleste udviklere til at bruge Bower, et andet plugin til styring af afhængigheder. Vi vil tale om Bower nederste. Lad os tage et hurtigt kig på fordele og ulemper.

Opmærksomhed ! Før du begynder at migrere din applikation, råder jeg dig til at versionere din kode og lave nogle test. Det anbefales på det kraftigste at læse hele artiklen, før man begiver sig ud på denne langsigtede mission.

resumé

Introduktion

Assetic, den misforståede ven

Det mener jeg for mit vedkommendeAssetisk er misforstået og misbrugt. Jeg vil forklare dig mine tanker. (Desuden rettede jeg denne artikel efter en misforståelse fra min side, tak til Manuel Klein for hans feedback).

Benefit

Brugen afAssetisk giver dig mulighed for at annullere cachen på ressourcerne, fordi navnet på de genererede JS- og CSS-ressourcer ændres, hver gang du starter kommandoen "assetic:dump". En vis fordel!

ulemper

Assetic tilbyder få muligheder for at konfigurere, hvordan ressourcer genereres.
Det er nødvendigt at installere PHP-bundter for at generere eksotiske ressourcer som LESS. PHP-koden er installeret i leverandører mens denne opgave kun er nyttig for klienten. Nej til serveren. Derudover øger det antallet af dit projekt.
Kode PHP er nødvendigt i skabeloner Twig utilisant Assetisk eller næsten alle sammen. Mens med Grunt, vil den kompilerede ressource blive kaldt ved det navn, du gav den.

Brug virkelig Assetic i dine skabeloner

Jeg ser ofte i skabeloner Twig at jeg støder på, ressourcer forbundet nogle gange via Assetisk, nogle gange via aktiver de Symfoni.

# Brug af Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Ubrugt Assetic, ved hjælp af Assets
/bundles/namespacemy/css/main.css

I det første tilfælde, Assetisk virkelig gælder. I det andet tilfælde, Assetisk er helt skjult for ikke at bruge aktiver de Symfony. Brugen af aktiver er også en fejl efter min mening, i det mindste for adgang til JS- og CSS-ressourcer. Slut på parentes...

Grunt JS den sååå fleksible compiler!

GruntJS baseret på node.js. Det er et værktøj på klientsiden, der bruger moduler til at udføre mange handlinger såsom filsammenkædning, minifikationen, billedkomprimering, kompilering af LESS, TypeScript... I modsætning til Assetisk, bliver du nødt til at konfigurere visse konfigurationer, men vær sikker på, denne indledende investering vil betale sig og i sidste ende meget hurtigere endAssetisk.

Introduktion til Bower, ressourcernes composer.json

GruntJS er god og kommer til at blive placeret på samme segment somAssetisk. Men så længe du bruger node.js, samt bruge Bower ! Det er en afhængighedsleder. For at sige det enkelt, definerer du de ressourcer, du har brug for, "sådant bibliotek i en sådan version" og Bower sørger for at få den version du ønsker. Selvfølgelig ligesom composer.json for PHP, kan du tilføje versionsintervaller. Hvis du ønsker et bibliotek i version 3.3., *Bower vil give dig den seneste tilgængelige version. En løsning til nemt at opdatere disse ressourcer. Et tilbagevendende problem på vores standardprojekter, fordi vi har (havde!) en tendens til at downloade en version og aldrig opdatere den efterfølgende. Vi havde ikke de mindre opdateringer, der nogle gange er så nyttige.

Teknisk set, Bower bruger filen bower.json. Dens syntaks er meget enkel. Jeg opfordrer dig til at bruge den, selvom du kan fortsætte uden den. Filen skal versioneres i modsætning til de ressourcer, der Bower vil komme til at downloade for dig. For at komme i gang vil jeg give dig et eksempel nedenfor.

Versionering af kompilerede ressourcer

For mit vedkommende havde jeg fået for vane ikke at versionere mine kompilerede ressourcer til Assetisk men jeg besluttede at gøre det modsatte for GruntJS. Da jeg ikke har ressourcer til at klare mig efter Bower (se Introduktion til Bower), vil jeg samle mine ressourcer og gitters. På denne måde kan jeg hurtigt implementere min applikation. Jeg har aldrig fået feedback på denne praksis, men det forekommer mig respektabelt, fordi to operationer er annulleret på tidspunktet for implementeringen (gendannelse af ressourcer med Bower og kompiler med GruntJS), samt behovet for at have node.js på sin maskine.

Fjern Assetic fra vores Symfony-projekt

Assetisk blev valgt til at være standardkomponenten, der er ansvarlig for kompilering af ressourcer. Vær opmærksom på, at det trods alt er meget nemt at fjerne.

Slet blokke Twig Type javascript et stilark. De er ikke nødvendige. Hold de filer, du brugte, til side. I fremtiden vil de filer, du gerne vil bruge, blive defineret i filen Gruntfile.js. Det vil vi se lidt senere.

#app/config/config.yml
# Fjern konfiguration fra assetic. Der vil også være nogle i config_prod.yml, config_dev.yml og andre uploadede filer
assetisk:
 fejlfinde: "%kernel.debug%"
 use_controller: falsk
 bundter: []
 filtre:
 cssrewrite: ~

#app/AppKernel.php
# Stop indlæsning af AsseticBundle ved at slette linjen fra AppKernel
...
ny SymfonyBundleAsseticBundleAsseticBundle()
...

# komponist.json
# Fjern assetic bundle
...
"symfony/assetic-bundle": "~2.3"
...

Der går du, du har deaktiveret Assetisk globalt. På denne måde skal du ikke længere forvente at finde kommandoen assetic:dump et assetic:watch.

Hvordan vil Grunt JS arbejde i vores projekt?

Vi bliver nødt til at konfigurere vores projekt med tre filer:

pakke.json som giver os mulighed for at installere plugins node.js (GruntJS og hans bidrag);
bower.json at rapportere om afhængigheder, der skal løses for at samle vores ressourcer;
Gruntfile.js som du kommer til at arbejde mest på. Den vil indeholde alle de handlinger, der er mulige og/eller skal udføres for at kompilere en del af eller hele dit projekt.

package.json for at installere Grunt JS

{
"afhængigheder": {
"grynte": "^0.4.5",
"grin-bidrag-mindre": "~0.11.0",
"grynte-bidrag-grimme": "^0.6.0",
"load-grunt-opgaver": "^0.6.0"
},
"afhængigheder": {
"grynte": "^0.4.5"
}
}

Brug først dette indhold. Det kræver installation af GruntJS og bidrag, hvoraf to (grynt-bidrag-mindre et grynte-bidrage-grimme) giver dig mulighed for at kompilere dine JavaScript-filer og filer Mindre.

bower.json for at løse mine afhængigheder (bootstrap, font-awesome, …)

{
"ignorere": [
"**/.*",
"node_modules",
"bower_components",
"test",
"testning"
],
"afhængigheder": {
"bootstrap": "3.3.*"
}
}

Her er en minimal fil. I mit tilfælde anmodede jeg om, at den seneste version af 3.3-grenen af Bootstrap blive downloadet. Som standard, når du gør en bower installation dine afhængigheder vil blive installeret i mappen bower_components. Gennem brug af .bowerrc du kan ændre destinationsmappen. Du kan finde mere information på Bowers hjemmeside.

1 2	# Installer afhængigheder ved hjælp af Bower $ bower installation

Gruntfile.js – Hvor det hele begynder

Alle de kommandoer og handlinger, du gerne vil tilføje dette faktum i filen Gruntfile.js. Du kan blandt andet kompilere filer mindrecss et sass, sammenkæde enhver form for filer, kompilér maskinskrift, formindske JavaScript-filer, billeder samt HTML-filer. Du kan også ændre størrelse på billeder og kopiere filer (som skrifttyper).

I dag vil jeg bare vise dig, hvordan du kompilerer filer .mindre og formindske filer . Js. Handlinger, som jeg udfører hver dag, og som gør, at jeg i dag nemt kan bruge den eller den del af bootstrap. I stedet for at bruge det hele bootstrap når alt hvad du behøver er glyfikoner, kan det være interessant at arbejde på et brugerdefineret bibliotek.

modul.exports= funktion (grynt) {
kræver('load-grunt-tasks')(grynte);
grunt.initConfig({
mindre: {
dist: {
optioner: {
komprimere: sand,
yuicompress: sand,
optimering: 2
},
filer: {
"web/css/main.css": [
"bower_components/bootsrap/dist/css/bootstrap.css",
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
grimme: {
optioner: {
mangle: falsk,
kildekort: sand
},
dist: {
filer: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grynt. registerOpgave('Standard', ["mindre", "grimme"]);
};

Her er en perfekt fungerende fil. Jeg bruger det også på et projekt med lidt ramme fordi det er en API. Assetisk var i mit tilfælde ret ubrugelig. Så jeg foretrak at undvære det for at bruge et værktøj eksternt til serveren og levere de perfekt konstruerede ressourcer på tidspunktet for implementeringen.

Lad os beskrive handlingerne for Gruntfile.js

I den forrige fil konfigurerede jeg de to bidrag fra GruntJS (_mindre _og grimme), som jeg installerede takket være min pakke.json. Du vil bemærke, at plugins let kan skelnes fra hinanden. Tag sagen om forlængelsen mindre.

Hvert bidrag Grunt som du skal bruge, skal deklareres via et nøgleord defineret for bidraget. Eksempel, for grynt-bidrag-mindre nøgleordet er mindre. Under denne del kan vi definere mål. Under udtrykket mål forstå Subpart. I et konkret tilfælde kunne vi definere en mål bootstrap at kompilere biblioteket af samme navn fra kilden mindre. Vi kunne definere et andet sæt dist at samle kilderne til vores projekt. Brugen af flere undersæt er ikke en nødvendighed, men du vil have mulighed for at bruge dem senere, når du bruger bidrag vagt for at spare tid.

Så er strukturen af delmængderne af den samme udvidelse ISO. Hos Contrario er strukturen af hvert bidrag forskellig. Standardbidrag præsenteres ofte med mange eksempler. Officielle plugins er tilgængelige på GitHub-lageret.

Lad os gå tilbage til vores eksempel og konfigurationen af kompileringen af vores filer .mindre. I spillet filer vi tilføjer navnet på de endelige filer som en nøgle, og som en værdi, en række inputfiler, der skal kompileres. Jeg tror, det ikke er nødvendigt at detaljere mere, fordi syntaksen er ret intuitiv.

Bidraget grimme bruges til sammenkædning, minifikation og komprimering af JavaScript-filer, bruger den samme struktur. I dette tilfælde er det ganske enkelt at bruge de to bidrag.

Kunsten at kompilere

Og nu kompilons vores kilder. Med Assetisk, kører vi denne kommando:

1	php app/konsol assetic:dump

Nu har vi fjernet AsseticBundle. Vi har ikke længere denne ordre. Så vi kommer til at køre vores plugin fra Node.

grynt

Du kan se, at det stadig ikke er særlig kompliceret... I dette tilfælde vil de opgaver, der vil blive udført, være den, der er givet for profilen Standard. Det blev defineret i sidste linje.

1	grynt. registerOpgave('Standard', ["mindre", "grimme"]);

Du ville meget vel have defineret en profil javascript som ikke ville have henrettet grimme.

1	grynt. registerOpgave('javascript', ['grimme']);

I tilfælde af at du kunne have kørt kommandoen Grunt med profilnavnet efter.

1	grynte javascript

Du kan definere lige så mange profiler, som du vil. I tilfælde af min profil javascript, interessen er mindre, fordi du også kunne have foretaget følgende opkald.

1	grynte grimme

Konklusion

Nu ved du, hvordan du kompilerer dine ressourcer. Hvis du ikke har fat i alle finesserne, burde du hurtigt kunne sætte pris på al den fleksibilitet, som tilbydes af Grunt med respekt forAssetisk. Derudover kan du udover typiske ressourcer som javascript og css også behandle skrifttyper, billeder... Et aktiv der hurtigt vandt mig.

Den reelle fordel ved Grunt er dens fleksibilitet dens anvendelse. Grunt et Bower mellem dem inkarnerer et alternativ til Assetic. Uden Bower du stadig kan arbejde med Grunt men oplevelsen bliver ikke total.

Jeg håber, at denne artikel vil give dig mulighed for nemt at forstå brugen af Grunt. Vær modig, du er der næsten!