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

jeg visste GruntJS uten å ha brukt det noen gang, men jeg måtte ha hørt fra en utvikler Symfony gi meg massen slik at jeg ser nærmere på denne løsningen. Bytt først ut Assetisk pari GruntJS var for meg en løsning for å få prosjektene mine til å fungere Symfony avec HHVM. Nå serveren PHP de Facebook fungerer perfekt med Assetisk men jeg finner stadig færre grunner til å fortsette å bruke Assetisk. Til slutt, bruken av Grunt, en plugin basert på Knutepunkt JS, driver de fleste utviklere til å bruke bower, en annen plugin for å administrere avhengigheter. Vi skal snakke om bower Nedre. La oss ta en rask titt på fordeler og ulemper.

Merk følgende ! Før du begynner å migrere applikasjonen, anbefaler jeg at du versjonerer koden og tester. Det anbefales på det sterkeste å lese hele artikkelen før du begynner på dette langsiktige oppdraget.

sammendrag

Introduksjon

Assetic, den misforståtte vennen

For min del vurderer jeg detAssetisk er misforstått og misbrukt. Jeg vil forklare mine tanker for deg. (I tillegg rettet jeg denne artikkelen etter en misforståelse fra min side, takk til Manuel Klein for tilbakemeldingen).

Nytte

Bruken avAssetisk lar deg avbryte hurtigbufferen på ressursene fordi navnet på de genererte JS- og CSS-ressursene endres hver gang du starter kommandoen "assetic:dump". En viss fordel!

ulemper

Assetic tilbyr få alternativer for å konfigurere hvordan ressurser genereres.
Det er nødvendig å installere PHP-bunter for å generere eksotiske ressurser som LESS. PHP-koden er installert i leverandører mens denne oppgaven kun er nyttig for klienten. Nei for serveren. I tillegg øker det antall prosjekter.
Kode PHP er nødvendig i maler Kvist utilisant Assetisk eller nesten alle. Mens med Grunt vil den kompilerte ressursen kalles av navnet du ga den.

Bruk virkelig Assetic i malene dine

Jeg ser ofte i maler Kvist som jeg kommer over, ressurser koblet noen ganger via Assetisk, noen ganger via eiendeler de Symfoni.

# Bruker Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Ubrukt Assetic, bruker Assets
/bundles/namespacemy/css/main.css

I det første tilfellet, Assetisk gjelder virkelig. I det andre tilfellet, Assetisk er helt skjult for ikke å bruke eiendeler de Symfony. Bruken av eiendeler er også en feil etter min mening, i det minste for tilgang til JS- og CSS-ressurser. Slutt på parentes...

Grunt JS den sååå fleksible kompilatoren!

GruntJS basert på node.js. Det er et verktøy på klientsiden som bruker moduler til å utføre mange handlinger som filsammenkobling, minifisering, bildekomprimering, kompilering av LESS, TypeScript... I motsetning til Assetisk, du må sette opp visse konfigurasjoner, men vær trygg, denne første investeringen vil betale seg og til slutt mye raskere ennAssetisk.

Introduksjon til Bower, ressursens composer.json

GruntJS er bra og kommer til å bli plassert på samme segment somAssetisk. Men så lenge du bruker node.js, samt bruk bower ! Det er en avhengighetsansvarlig. For å si det enkelt, definerer du ressursene du trenger, "slikt bibliotek i slik versjon" og bower tar seg av å få den versjonen du ønsker. Selvfølgelig, akkurat som komponist.json for PHP, kan du legge til versjonsområder. Hvis du vil ha et bibliotek i versjon 3.3., *Bower vil gi deg den nyeste tilgjengelige versjonen. En løsning for enkelt å oppdatere disse ressursene. Et tilbakevendende problem på våre standardprosjekter fordi vi har (hadde!) en tendens til å laste ned en versjon og aldri oppdatere den i etterkant. Vi hadde ikke de mindre oppdateringene som noen ganger er så nyttige.

Teknisk sett, bower bruker filen bower.json. Syntaksen er veldig enkel. Jeg oppfordrer deg til å bruke den selv om du kan fortsette uten den. Filen må være versjonert i motsetning til ressursene som bower kommer til å laste ned for deg. For å komme i gang vil jeg gi deg et eksempel nedenfor.

Versjonskontroll av kompilerte ressurser

For min del hadde jeg fått for vane å ikke versjonere de kompilerte ressursene mine for Assetisk men jeg bestemte meg for å gjøre det motsatte GruntJS. Siden jeg klarer meg uten ressurser til å klare meg etter bower (se Introduksjon til bower), vil jeg kompilere ressursene mine og gitters. På denne måten kan jeg raskt distribuere applikasjonen min. Jeg har aldri fått tilbakemelding på denne praksisen, men det virker respektabelt for meg fordi to operasjoner blir kansellert på tidspunktet for utplassering (gjenoppretting av ressurser med bower og kompilere med GruntJS), samt behovet for å ha node.js på maskinen hans.

Fjern Assetic fra vårt Symfony-prosjekt

Assetisk ble valgt til å være standardkomponenten som er ansvarlig for kompilering av ressurser. Vær oppmerksom på at det til tross for alt er veldig enkelt å fjerne.

Slett blokker Kvist Av typen javascript et stilark. De er ikke nødvendige. Hold til side filene du brukte. I fremtiden vil filene du ønsker å bruke, bli definert i filen Gruntfile.js. Det får vi se litt senere.

#app/config/config.yml
# Fjern konfigurasjonen fra assetic. Det vil også være noen i config_prod.yml, config_dev.yml og andre opplastede filer
assetisk:
 feilsøke: "%kernel.debug%"
 use_controller: falsk
 bunter: []
 filtre:
 cssrewrite: ~

#app/AppKernel.php
# Stopp lasting av AsseticBundle ved å slette linjen fra AppKernel
...
nytt SymfonyBundleAsseticBundleAsseticBundle()
...

# composer.json
# Fjern assetisk bunt
...
"symfony/assetic-bundle": "~2.3"
...

Sånn, du har deaktivert Assetisk globalt. På denne måten kan du ikke lenger forvente å finne kommandoen assetic:dump et assetic:watch.

Hvordan vil Grunt JS fungere i prosjektet vårt?

Vi må konfigurere prosjektet vårt med tre filer:

pakke.json som lar oss installere plugins node.js (GruntJS og hans bidrag);
bower.json å rapportere om avhengigheter som skal løses for å kompilere ressursene våre;
Gruntfile.js som du kommer til å jobbe mest med. Den vil inneholde alle handlingene som er mulige og/eller som skal utføres for å kompilere deler av eller hele prosjektet ditt.

package.json for å installere Grunt JS

{
"avhengigheter": {
"grynte": «^0.4.5»,
«grint-bidragsløst»: «~0.11.0»,
"grunt-bidra-uglify": «^0.6.0»,
"last-grunt-oppgaver": «^0.6.0»
},
"Dependencies": {
"grynte": «^0.4.5»
}
}

Bruk først dette innholdet. Det krever installasjon av GruntJS og bidrag, hvorav to (grynt-bidrag-mindre et grynte-bidra-uglifa) lar deg kompilere JavaScript-filene og -filene dine Mindre.

bower.json for å løse avhengighetene mine (bootstrap, font-awesome, ...)

{
"overse": [
«**/.*»,
"node_modules",
«bower_components»,
"test",
"testing"
],
"avhengigheter": {
"Støvelhempe": «3.3.*»
}
}

Her er en minimal fil. I mitt tilfelle ba jeg om at den nyeste versjonen av 3.3-grenen av Bootstrap lastes ned. Som standard, når du gjør en installasjon av bower dine avhengigheter vil bli installert i mappen bower_components. Gjennom bruk av .bowerrc du kan endre målmappen. Du finner mer informasjon på Bowers nettside.

1 2	# Installer avhengigheter ved hjelp av Bower $ bower installasjon

Gruntfile.js – Der det hele begynner

Alle kommandoene og handlingene du vil legge til dette faktum i filen Gruntfile.js. Du kan blant annet kompilere filer lesscss et frekk, slå sammen alle typer filer, kompiler Loggfila, forminske JavaScript-filer, bilder så vel som HTML-filer. Du kan også endre størrelse på bilder og kopiere filer (som fonter).

I dag skal jeg bare vise deg hvordan du kompilerer filer .mindre og forminske filer . Js. Handlinger som jeg utfører hver dag og som gjør at jeg i dag enkelt kan bruke denne eller den delen av bootstrap. I stedet for å bruke alle bootstrap når alt du trenger er glyfikoner, kan det være interessant å jobbe med et tilpasset bibliotek.

moduler.exports= funksjon (grynt) {
krever('load-grunt-tasks')(grynte);
grunt.initConfig({
mindre: {
dist: {
alternativer: {
komprimere: sant,
yuicompress: sant,
optimalisering: 2
},
filer: {
«web/css/main.css»: [
«bower_components/bootsrap/dist/css/bootstrap.css»,
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
stygge: {
alternativer: {
mangle: falsk,
kildeKart: sant
},
dist: {
filer: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grynt. registerTask('misligholde', ["mindre", "stygge"]);
};

Her er en perfekt fungerende fil. Jeg bruker den også på et prosjekt med lite ramme fordi det er en API. Assetisk var i mitt tilfelle ganske ubrukelig. Så jeg foretrakk å klare meg uten det for å bruke et verktøy eksternt til serveren og levere de perfekt konstruerte ressursene på tidspunktet for distribusjon.

La oss beskrive handlingene for Gruntfile.js

I forrige fil konfigurerte jeg de to bidragene til GruntJS (_mindre _og stygge) som jeg installerte takket være min pakke.json. Du vil legge merke til at pluginene lett kan skilles fra hverandre. Ta saken om utvidelsen mindre.

Hvert bidrag Grunt som du skal bruke må deklareres via et nøkkelord definert for bidraget. Eksempel, for grynt-bidrag-mindre nøkkelordet er mindre. Under denne delen kan vi definere mål. Under begrepet mål forstå Subpart. I et konkret tilfelle kan vi definere en mål bootstrap å kompilere biblioteket med samme navn fra kilden mindre. Vi kan definere et annet sett dist å sammenstille kildene til prosjektet vårt. Bruk av flere delsett er ikke en nødvendighet, men du vil ha muligheten til å bruke dem senere når du bruker bidrag se for å spare tid.

Da er strukturen til delsettene til samme utvidelse ISO. Hos Contrario er strukturen på hvert bidrag forskjellig. Standardbidrag presenteres ofte med mange eksempler. Offisielle plugins er tilgjengelige på GitHub-depotet.

La oss gå tilbake til vårt eksempel og konfigurasjonen av kompileringen av filene våre .mindre. I spillet filer vi legger til navnet på de endelige filene som en nøkkel, og som en verdi, en rekke inndatafiler som skal kompileres. Jeg tror det ikke er nødvendig å detaljere mer fordi syntaksen er ganske intuitiv.

Bidraget stygge brukes til sammenkobling, minifisering og komprimering av JavaScript-filer, bruker samme struktur. I dette tilfellet er det ganske enkelt å bruke de to bidragene.

Kunsten å kompilere

Og nå kompilons våre kilder. Med Assetisk, kjører vi denne kommandoen:

1	php app/konsoll assetic:dump

Nå har vi fjernet AsseticBundle. Vi har ikke lenger denne ordren. Så vi skal kjøre plugin-en vår fra Node.

grynt

Du ser at det fortsatt ikke er veldig komplisert... I dette tilfellet vil oppgavene som skal utføres være den som er gitt for profilen misligholde. Det ble definert i siste linje.

1	grynt. registerTask('misligholde', ["mindre", "stygge"]);

Du ville ha veldig godt definert en profil javascript som ikke ville ha henrettet stygge.

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

I tilfelle du kunne ha kjørt kommandoen Grunt med profilnavnet etter.

1	grynt javascript

Du kan definere så mange profiler du vil. Når det gjelder profilen min javascript, er interessen mindre fordi du også kunne ha gjort følgende samtale.

1	grynt stygge

konklusjonen

Nå vet du hvordan du kompilerer ressursene dine. Hvis du ikke har fått med deg alle finessene, bør du raskt kunne sette pris på all fleksibiliteten som tilbys av Grunt med respekt forAssetisk. Dessuten, bortsett fra standardressurser som javascript og css, kan du også behandle fonter, bilder... En ressurs som raskt vant meg.

Den virkelige fordelen med Grunt er dens fleksibilitet dens bruk. Grunt et bower mellom dem legemliggjør et alternativ til Assetic. Uten bower du fortsatt kan jobbe med Grunt men opplevelsen vil ikke være total.

Jeg håper denne artikkelen lar deg enkelt forstå bruken av Grunt. Vær modig, du er nesten der!