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

lo sapevo GruntJS senza averlo mai usato ma avrei dovuto sentire uno sviluppatore symfony dammi la massa in modo che esamini questa soluzione. Innanzitutto, sostituisci Assetico da GruntJS era per me una soluzione per far funzionare i miei progetti symfony con HHVM. Ora il server PHP de Facebook funziona perfettamente con Assetico ma trovo sempre meno motivi per continuare a usarlo Assetico. Infine, l'uso di Grugnito, un plugin basato su Nodo JS, spinge la maggior parte degli sviluppatori a utilizzare pergolato, un altro plugin per la gestione delle dipendenze. Parleremo di pergolato inferiore. Diamo una rapida occhiata ai pro e ai contro.

Attenzione! Prima di iniziare a migrare la tua applicazione, ti consiglio di controllare la versione del tuo codice ed eseguire alcuni test. Si consiglia vivamente di leggere l'intero articolo prima di intraprendere questa missione a lungo termine.

sommario

Introduzione

Assetic, l'amico incompreso

Da parte mia, lo consideroAssetico è frainteso e abusato. Ti spiegherò i miei pensieri. (Inoltre, ho corretto questo articolo a seguito di un malinteso da parte mia, grazie a Manuel Klein per il suo feedback).

Beneficio

L'utilizzo diAssetico permette di cancellare la cache sulle risorse perché il nome delle risorse JS e CSS generate cambia ogni volta che si lancia il comando “assetico: discarica”. Un certo vantaggio!

svantaggi

Assetic offre poche opzioni per configurare la modalità di generazione delle risorse.
È necessario installare bundle PHP per generare risorse esotiche come LESS. Il codice PHP è installato nel file fornitori mentre questa attività è utile solo per il cliente. No per il server. Inoltre, aumenta il numero del tuo progetto.
Codice PHP è necessario nel modelli Ramoscello utilisant Assetico o quasi tutti. Mentre con Grunt, la risorsa compilata verrà chiamata con il nome che le hai dato.

Usa davvero Assetic nei tuoi modelli

Vedo spesso in modelli Ramoscello che mi imbatto, risorse collegate a volte tramite Assetico, a volte tramite il attività de sinfonia.

# Utilizzo di Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Assetic inutilizzato, utilizzando le risorse
/bundles/namespacemy/css/main.css

Nel primo caso, Assetico si applica davvero. Nel secondo caso, Assetico è completamente nascosto in modo da non utilizzare il attività de symfony. L'impiego di attività è anche un errore secondo me, almeno per l'accesso alle risorse JS e CSS. Fine della parentesi...

Grunt JS il compilatore Sooo flessibile!

GruntJS basato su Node.js. È uno strumento lato client che utilizza moduli per eseguire molte azioni come la concatenazione di file, minification, compressione delle immagini, compilazione di LESS, TypeScript… Diversamente Assetico, dovrai impostare determinate configurazioni ma stai tranquillo, questo investimento iniziale ti ripagherà e alla fine molto più velocemente diAssetico.

Introduzione a Bower, il composer.json delle risorse

GruntJS è buono e viene posto sullo stesso segmento diAssetico. Ma finché usi Node.js, così come usare pergolato ! È un gestore delle dipendenze. Per dirla semplicemente, definisci le risorse di cui hai bisogno, "tale libreria in tale versione" e pergolato si occupa di ottenere la versione desiderata. Certo, proprio come compositore.json per PHP, puoi aggiungere intervalli di versioni. Se vuoi una libreria nella versione 3.3., * Pergolato otterrai l'ultima versione disponibile. Una soluzione per aggiornare facilmente queste risorse. Un problema ricorrente nei nostri progetti standard perché abbiamo (avevamo!) la tendenza a scaricare una versione e poi non aggiornarla mai. Non avevamo gli aggiornamenti minori che a volte sono così utili.

Tecnicamente, pergolato utilizza il file bower.json. La sua sintassi è molto semplice. Vi esorto a usarlo anche se potete continuare senza di esso. Il file dovrà essere versionato a differenza delle risorse che pergolato verrà scaricato per te. Per iniziare, ti fornirò un esempio di seguito.

Controllo delle versioni delle risorse compilate

Da parte mia, avevo preso l'abitudine di non controllare le versioni delle mie risorse compilate per Assetico ma ho deciso di fare il contrario per GruntJS. Dal momento che non ho risorse per gestire pergolato (vedi Introduzione a pergolato), compilerò le mie risorse e gitters. In questo modo, posso distribuire rapidamente la mia applicazione. Non ho mai avuto riscontri su questa pratica ma mi sembra rispettabile perché due operazioni vengono annullate al momento del deployment (recupero risorse con pergolato e compilare con GruntJS), così come la necessità di avere Node.js sulla sua macchina.

Rimuovi Assetic dal nostro progetto Symfony

Assetico è stato scelto come componente predefinito responsabile della compilazione delle risorse. Tieni presente che, nonostante tutto, è molto facile da rimuovere.

Elimina blocchi Ramoscello tipo javascript et foglio di stile. Non sono necessari. Tieni da parte i file che stavi usando. In futuro, i file che vorresti usare saranno definiti nel file Gruntfile.js. Lo vedremo un po' più avanti.

#app/config/config.yml
# Rimuove la configurazione da assetic. Ce ne saranno anche alcuni in config_prod.yml, config_dev.yml e altri file caricati
patrimoniale:
 eseguire il debug: “%kernel.debug%”
 use_controller: falso
 gruppi: []
 filtri:
 riscrittura css: ~

#app/AppKernel.php
# Interrompi il caricamento di AsseticBundle eliminando la riga da AppKernel
...
nuovi SymfonyBundleAsseticBundleAsseticBundle()
...

# compositore.json
# Rimuovi pacchetto asset
...
"symfony/assetic-bundle": "~2.3"
...

Ecco fatto, ti sei disattivato Assetico globalmente. In questo modo, non aspettarti più di trovare il comando assetico: discarica et attivo: guarda.

Come funzionerà Grunt JS all'interno del nostro progetto?

Dovremo configurare il nostro progetto con tre file:

pacchetto.json che ci permetterà di installare i plugin Node.js (GruntJS e i suoi contributi);
bower.json segnalare le dipendenze da risolvere per compilare le nostre risorse;
Gruntfile.js su cui lavorerai di più. Conterrà tutte le azioni possibili e/o da svolgere per compilare parte o tutto il tuo progetto.

package.json per installare Grunt JS

{
"dipendenze": {
"grugnito": “^0.4.5”,
"grugnito-contrib-less": “~0.11.0”,
"grugnito-contrib-brutto": “^0.6.0”,
"carica-grugnito-attività": “^0.6.0”
},
"devDependencies": {
"grugnito": “^0.4.5”
}
}

Innanzitutto, usa questo contenuto. Richiede l'installazione di GruntJS e contributi, due dei quali (grunt-contrib-meno et grugnito-contrib-brutto) ti permetterà di compilare i tuoi file e file JavaScript Meno.

bower.json per risolvere le mie dipendenze (bootstrap, font-awesome, …)

{
"ignorare": [
“**/.*”,
"moduli_nodo",
"pergola_componenti",
"Test",
"test"
],
"dipendenze": {
"stivaletto": “3.3.*”
}
}

Ecco un file minimo. Nel mio caso, ho richiesto che l'ultima versione del ramo 3.3 di bootstrap essere scaricato. Per impostazione predefinita, quando esegui a installazione pergola le tue dipendenze verranno installate nella cartella bower_components. Attraverso l'uso di .bowerrc puoi cambiare la cartella di destinazione. Puoi trovare maggiori informazioni sul sito web di Bower.

1 2	# Installa le dipendenze usando Bower $ pergola installazione

Gruntfile.js – Dove tutto ha inizio

Tutti i comandi e le azioni che desideri aggiungere nel file Gruntfile.js. Tra le altre cose, puoi compilare file meno et insolenza, concatena qualsiasi tipo di file, compila Dattiloscritto, minificatore File JavaScript, immagini e file HTML. Puoi anche ridimensionare le immagini e copiare i file (come i caratteri).

Oggi ti mostrerò solo come compilare i file .meno e minimizzare i file . Js. Azioni che compio ogni giorno e che mi permettono oggi di utilizzare facilmente questa o quella parte di bootstrap. Invece di usare tutto bootstrap quando tutto ciò di cui hai bisogno è glificoni, potrebbe essere interessante lavorare su una libreria personalizzata.

modulo.esporta= function (grugnito) {
richiedere('carica-grugnito-task')(grugnito);
grunt.initConfig({
meno: {
dist: {
Opzioni: {
comprimere: vero,
yuicompress: vero,
ottimizzazione: 2
},
file: {
"web/css/principale.css": [
"bower_components/bootsrap/dist/css/bootstrap.css",
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
brutto: {
Opzioni: {
mancante: falso,
sourceMap: vero
},
dist: {
file: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grugnito.registerTask('predefinito', ["meno", "brutto"])?
};

Ecco un file perfettamente funzionante. Lo uso anche su un progetto con poco telaio perché è un API. Assetico era nel mio caso abbastanza inutile. Quindi ho preferito farne a meno per utilizzare uno strumento esterno al server e consegnare le risorse perfettamente costruite al momento della distribuzione.

Descriviamo le azioni per Gruntfile.js

Nel file precedente, configuro i due contributi di GruntJS (_less _e brutto) che ho installato grazie al mio pacchetto.json. Noterai che i plugin sono facilmente distinguibili l'uno dall'altro. Prendiamo il caso dell'estensione meno.

Ogni contributo Grugnito che si intende utilizzare deve essere dichiarato tramite una parola chiave definita per il contributo. Esempio, per grunt-contrib-meno la parola chiave è meno. Sotto questa parte, possiamo definire obiettivi. Sotto il termine bersaglio capire Sottoparte. In un caso concreto, potremmo definire a bersaglio bootstrap per compilare la libreria con lo stesso nome dal sorgente meno. Potremmo definire un altro insieme dist per compilare le fonti del nostro progetto. L'uso di diversi sottoinsiemi non è una necessità ma avrai l'opportunità di usarli in seguito quando utilizzerai il file orologio contributo risparmiare tempo.

Quindi la struttura dei sottoinsiemi della stessa estensione è ISO. A Contrario, la struttura di ciascun contributo è diversa. I contributi standard sono spesso presentati con molti esempi. I plugin ufficiali sono disponibili sul repository GitHub.

Torniamo al nostro esempio e alla configurazione della compilazione dei nostri file .meno. Nel gioco file aggiungiamo come chiave il nome dei file finali e come valore un array di file di input da compilare. Penso che non sia necessario dettagliare di più perché la sintassi è abbastanza intuitiva.

Il contributo brutto utilizzato per la concatenazione, minificazione e compressione dei file JavaScript, utilizza la stessa struttura. In questo caso, è abbastanza semplice utilizzare i suoi due contributi.

L'arte della compilazione

E ora compilons le nostre fonti. Con Assetico, eseguiamo questo comando:

1	php app/console assetic:dump

Ora abbiamo rimosso AsseticBundle. Non abbiamo più quest'ordine. Quindi eseguiremo il nostro plugin da Nodo.

grugnito

Vedi che non è ancora molto complicato... In questo caso, le attività che verranno eseguite saranno quelle fornite per il profilo predefinito. È stato definito nell'ultima riga.

1	grugnito.registerTask('predefinito', ["meno", "brutto"])?

Avresti definito molto bene un profilo javascript chi non avrebbe giustiziato brutto.

1	grugnito.registerTask('javascript', ['brutto'])?

Nel caso in cui avresti potuto eseguire il comando Grugnito con il nome del profilo dopo.

1	grugnito javascript

Puoi definire tutti i profili che desideri. Nel caso del mio profilo javascript, l'interesse è inferiore perché avresti potuto effettuare anche la seguente chiamata.

1	grugnisci brutto

Conclusione

Ora sai come compilare le tue risorse. Se non hai colto tutte le sottigliezze, dovresti essere in grado di apprezzare rapidamente tutta la flessibilità offerta da Grugnito riguardo aAssetico. Inoltre, oltre alle risorse standard come javascript e css, puoi anche elaborare font, immagini... Una risorsa che mi ha conquistato rapidamente.

Il vero vantaggio di Grugnito è la sua flessibilità il suo utilizzo. Grugnito et pergolato tra di loro incarna un'alternativa ad Assetic. Senza pergolato con cui puoi ancora lavorare Grugnito ma l'esperienza non sarà totale.

Spero che questo articolo ti permetta di comprendere facilmente l'uso di Grugnito. Sii coraggioso, ci sei quasi!