Share
Finora hai imparato come fare cose come compilare codice, autoprefixing, pulire, comprimere e minimizzare tutto semplicemente digitando poche parole. Questo è fantastico, ma cosa succede se hai un progetto che avrebbe bisogno di eseguire molti di questi comandi, uno dopo l'altro, più e più volte fino a quando non completi il tuo lavoro? Per esempio:
Anche con poche parole per comando diventerebbe rapidamente noioso nel corso di un tipico processo di creazione del sito.
Qui è dove "Task Runner" interviene per salvare la giornata. Con i task runner puoi configurare un singolo file all'interno del tuo progetto che definisce tutte le attività che devi eseguire sul tuo progetto e l'ordine in cui devono essere eseguite. In questo file puoi quindi definire i comandi personalizzati che puoi usare per eseguire tutti quelli compiti una volta.
In questo tutorial imparerai come configurare i runner di attività, e nel processo vedrai anche un esempio di inserimento di script dai pacchetti di Bower per una distribuzione efficiente nei tuoi progetti.
Nota: Questo tutorial presume che tu abbia completato tutte le esercitazioni precedenti in questa serie. Se non lo hai ancora fatto, ti sarà d'aiuto esaminarli prima di iniziare da qui.
Attualmente ci sono diversi runner di attività disponibili, tuttavia per gli scopi di questo tutorial ci concentreremo sui due che sono attualmente più popolari: Grunt e Gulp.
Ci sono diverse differenze tecniche tra i due progetti, che non entrerò ora. Né ti dirò quale dei due dovresti usare. Invece, ti consiglio di seguire i passaggi per l'utilizzo di entrambi, quindi decidere per te quale preferisci.
Stiamo creando un progetto che guarda e compila automaticamente Stylus e Jade e ottimizza CSS e JavaScript. Raggiungeremo questo prima usando Grunt, e poi (nel prossimo tutorial) usando Gulp.
Per cominciare, dovremo impostare un progetto di esempio con alcuni file al suo interno su cui può operare il nostro task runner. Creare una cartella denominata "Progetto Grunt", quindi aggiungere una sottocartella denominata "build" e una sottocartella denominata "source".
Nella cartella "source" aggiungi due nuove sottocartelle denominate "stylus", "jade". Aggiungi alcuni file di esempio del tipo appropriato in ogni cartella.
I file possono contenere qualsiasi codice tu voglia, solo così hai qualcosa su cui puoi vedere il processo di compilazione.
Mancia: se non sei sicuro del codice da aggiungere, prova ad acquisire un codice di esempio da Codepen: penne con lo stilo con tag, penne con tag jade.
Per esempio:
Approfitteranno inoltre di ciò che abbiamo imparato su Bower in una lezione precedente e recupereremo i download di jQuery e Modernizr, che combineremo e ridimensioneremo in un secondo momento.
Esegui i comandi:
bower installa jquery --save
bower install modernizr --save
Ora crea un duplicato dell'intera cartella del progetto e rinominalo "Gulp Project".
In questo modo puoi seguire i passaggi su come usare Grunt nella cartella "Progetto Grunt" e i passaggi per usare Gulp nella cartella "Gulp Project".
Per far funzionare i comandi Grunt è necessario installare la sua CLI (interfaccia a riga di comando). Installalo globalmente con:
[sudo] npm install -g grunt-cli
Ogni progetto che usa Grunt avrà bisogno di un file "package.json" nella cartella principale.
Abbiamo coperto l'impostazione di un file "package.json" utilizzando il comando npm init nel precedente tutorial sui pacchetti di terze parti. Se non hai ancora completato quella sezione per favore torna indietro e seguilo ora.
Installa Grunt nel tuo progetto e salvalo come dipendenza di sviluppo con:
npm install grunt --save-dev
Ogni progetto Grunt deve anche avere quello che viene chiamato a Gruntfile nella cartella principale.
Un Gruntfile è un file chiamato "Gruntfile.js" o "Gruntfile.coffee" se preferisci scrivere in CoffeeScript. Nel nostro caso lavoreremo con JavaScript, quindi aggiungi un file chiamato "Gruntfile.js" nella tua cartella principale.
Il riempimento del tuo Gruntfile ti permetterà di determinare quali comandi attiveranno quali compiti eseguire. Puoi iniziare semplicemente aggiungendo una shell di base nel tuo Gruntfile. Imposteremo il tuo codice di configurazione in un secondo momento.
Aggiungi il seguente codice al tuo Gruntfile.js:
module.exports = function (grunt) ;
Ti ricorderai che quando volevi utilizzare i pacchetti con npm o Bower, dovevi cercare nel posto giusto per ottenere le versioni progettate per funzionare con ogni sistema.
La stessa cosa succede quando si usano i pacchetti con Grunt. Attraverso Grunt è possibile accedere a un ecosistema di plug-in, che sono essenzialmente wrapper attorno ai pacchetti di vanilla npm. Questi plugin sono ancora consegnati tramite npm, ma sono equipaggiati appositamente per funzionare con Grunt
Ad esempio, invece del pacchetto npm UglifyJS, con Grunt potresti usare il plugin "grunt-contrib-uglify".
Puoi cercare i plugin Grunt su http://gruntjs.com/plugins
Per il nostro progetto installeremo questi sei plugin Grunt:
Ciascuno verrà installato nella sottocartella "node_modules" della cartella del progetto e salvato come dipendenza di sviluppo.
Esegui ognuno di questi comandi, uno alla volta, con il terminale puntato sulla cartella "Progetto Grunt":
installa npm grunt-contrib-stylus --save-dev
npm install grunt-autoprefixer --save-dev
installa npm grunt-contrib-cssmin --save-dev
installa npm grunt-contrib-jade --save-dev
npm installa grunt-contrib-uglify --save-dev
npm installa grunt-contrib-watch --save-dev
Quando hai finito, dovresti vedere queste cartelle all'interno della cartella "node_modules" del tuo progetto:
Ora useremo il grunt.loadNpmTasks metodo per abilitare i nostri plugin.
All'interno delle parentesi graffe del tuo Gruntfile esistente, aggiungeremo sei righe, una per abilitare ciascun plugin grunt, in questo modo:
module.exports = function (grunt) // Carica plugin plugin. grunt.loadNpmTasks ( 'grunt-contrib-stilo'); grunt.loadNpmTasks ( 'grunt-autoprefixer'); grunt.loadNpmTasks ( 'grunt-contrib-cssmin'); grunt.loadNpmTasks ( 'grunt-contrib-giada'); grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.loadNpmTasks ( 'grunt-contrib-orologio'); ;
Questo codice registra il nome di ciascun plug-in come comando grunt, permettendoci di usare quel comando per fare in modo che il plugin esegua un'attività. Ad esempio, useremmo il comando stilo grugnito per eseguire un'attività dello stilo,grunt autoprefixer per eseguire un'attività autoprefixer e così via.
I nostri plugin per grunt sono installati e i comandi per usarli sono operativi, tuttavia se tu li usassi in questo momento non vedresti accadere nulla. Il motivo è che dobbiamo configurare alcune configurazioni per determinare cosa ogni attività dovrebbe effettivamente fare.
Questo viene fatto aggiungendo il grunt.initConfig metodo per il tuo Gruntfile, e quindi passare le informazioni attraverso di esso che impone come si desidera eseguire ogni attività.
Innanzitutto, aggiungeremo il grunt.initConfig metodo sopra le linee che hai appena aggiunto per caricare i plugin grunt:
grunt.initConfig ();
Ora faremo del nostro spazio per passare le informazioni di configurazione. Aggiungi l'apertura e la chiusura di parentesi graffe all'interno delle parentesi regolari, quindi aggiungi una linea vuota tra di loro:
grunt.initConfig ();
Ora possiamo andare avanti e aggiungere la configurazione per ciascuno dei plugin che abbiamo installato.
Ogni plug-in ha una propria gamma di impostazioni che è possibile utilizzare e queste opzioni sono dettagliate nelle pagine collegate nella sezione "Installa plugin Grunt" sopra.
Puoi anche leggere tutti i dettagli sulla configurazione delle attività di Grunt qui: http://gruntjs.com/configuring-tasks
Inizieremo aggiungendo la configurazione per il nostro stilo compito.
Tra le parentesi graffe che hai aggiunto, sulla riga vuota, aggiungi il seguente codice:
stylus: compile: options: compress: false, paths: ['source / stylus'], files: 'build / style.css': 'source / stylus / main.styl',
Ora il tuo Gruntfile dovrebbe assomigliare a questo:
module.exports = function (grunt) grunt.initConfig (stylus: compile: options: compress: false, paths: ['source / stylus'], files: 'build / style.css': ' source / stylus / main.styl ',); // Carica plugin per grunt. grunt.loadNpmTasks ( 'grunt-contrib-stilo'); grunt.loadNpmTasks ( 'grunt-autoprefixer'); grunt.loadNpmTasks ( 'grunt-contrib-cssmin'); grunt.loadNpmTasks ( 'grunt-contrib-giada'); grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.loadNpmTasks ( 'grunt-contrib-orologio'); ;
Analizziamo il codice che abbiamo aggiunto qui. Non analizzeremo ogni attività, ma osservando questa dovrebbe darti un'idea del tipo di sintassi utilizzata quando si configura la configurazione dell'attività di Grunt.
Come accennato in precedenza, ogni plugin ha diverse opzioni di configurazione, quindi quando si utilizza un nuovo plug-in, dare un'occhiata alle istruzioni di utilizzo che offre.
La prima cosa che abbiamo fatto è aggiungere una voce nella nostra configurazione per il nostro stilo compito con il codice:
stilo: ,
All'interno di questo abbiamo aggiunto un compilare voce per controllare cosa succede durante la compilazione:
stylus: compile: ,
Dentro il compilare compito che abbiamo creato un opzioni la zona.
Abbiamo usato quell'area per impostare il comprimere opzione a falso, perché faremo l'ottimizzazione del codice più tardi.
Abbiamo anche impostato il percorsi opzione a [ 'Source / stilo'] quindi se Stylus vede il @importare direttiva durante la compilazione cercherà i file da importare nella cartella "source / stylus" del progetto:
stylus: compile: options: compress: false, paths: ['source / stylus'],
Quindi dopo il opzioni area abbiamo aggiunto a File area per controllare la directory di output e il nome del file, nonché la directory di input e il nome del file.
Abbiamo impostato la posizione di output del nostro file CSS compilato 'Build / style.css', mentre il file Stylus da elaborare è 'Source / stilo / main.styl'.
stylus: compile: options: compress: false, paths: ['source / stylus'], files: 'build / style.css': 'source / stylus / main.styl',
Ora, con il terminale puntato verso la cartella principale, esegui il comando:
stilo grugnito
Guarda dentro la tua cartella "build" e dovresti vedere un file "style.css" appena compilato.
Ora ci sposteremo abbastanza velocemente attraverso la configurazione di ogni attività rimanente. Inserisci ciascun blocco di codice di configurazione immediatamente dopo quello che hai aggiunto in precedenza.
Aggiungi questo codice:
autoprefixer: compile: files: 'build / style.css': 'build / style.css',,,
Esegui l'attività autoprefixer con:
grunt autoprefixer
Se controlli il tuo file "build / style.css" dovresti ora vedere i prefissi aggiunti dove richiesto.
Aggiungi questo codice:
cssmin: clean: files: 'build / style.css': 'build / style.css',
Esegui l'attività cssmin con:
grunt cssmin
Se guardi di nuovo il tuo "build / style.css", vedrai che è stato pulito e compresso per te.
Aggiungi questo codice:
jade: compile: files: [expand: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html"],
Esegui l'operazione jade con:
grugnito di giada
Se guardi all'interno della tua cartella "build", dovresti vedere un file HTML che corrisponde a ogni file Jade che hai nella cartella "source / jade".
Aggiungi questo codice:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
In questo esempio vedremo che stiamo facendo riferimento alle posizioni dei componenti Bower che abbiamo installato in precedenza.
Stiamo estraendo le versioni complete di jQuery e Modernizr dalla nostra cartella "bower_components", quindi concatenandole e ridimensionandole in un nuovo file denominato "output.min.js". Questo è un ottimo modo per distribuire script che stai gestendo con Bower.
Eseguire l'attività uglify con:
grugnito
Ora dovresti vedere un nuovo file "output.min.js" nella tua cartella "build".
Finora potrebbe sembrare che abbiamo appena sostituito un comando per eseguire un determinato compito con un altro comando, ma quello che abbiamo effettivamente fatto è gettare le basi per dove Grunt inizia davvero a brillare.
La chiave è la capacità di Grunt di avere un'attività che esegue un'altra attività. Quindi ora stiamo andando a configurare a orologio compito che monitorerà determinati file per le modifiche, quindi eseguirà il nostro stilo e giada compiti automaticamente per noi.
Aggiungi questo codice:
watch: stylus: files: ['source / stylus / *. styl'], tasks: ['stylus', 'autoprefixer', 'cssmin'], jade: files: ['source / jade / *. jade '], tasks: [' jade '],
Abbiamo prima aggiunto il nostro orologio compito, e quindi all'interno di che abbiamo impostato un'area per stilo e per giada.
Il File opzione in ciascun set su quali file devono essere guardati per le modifiche. Il compiti opzione imposta quali attività devono essere eseguite quando si verificano cambiamenti e in quale ordine.
Per stilo, abbiamo impostato il compito dell'orologio per monitorare tutti i file ".styl" nella cartella "source / stylus" e quando vedrà le modifiche eseguirà il stilo, autoprefixer e cssmin compiti in questo ordine.
Ora, quando l'attività di controllo è in esecuzione, tutto ciò che devi fare è salvare i tuoi file Stylus e otterrai automaticamente un file CSS compilato, autoprefixed e ottimizzato scritto nella cartella "build".
Allo stesso modo per giada, abbiamo impostato tutti i file ".jade" nella cartella "source / jade" da monitorare e ogni volta che ne viene salvato uno giada l'attività eseguirà e compilerà automaticamente il file HTML corrispondente nella "build" .
Esegui l'attività di controllo con:
orologio da grugnito
Fermalo di nuovo:
A questo punto ti starai chiedendo, per quanto riguarda l'attività di uglify JavaScript?
La ragione per cui non l'abbiamo inclusa con orologio il compito è che non stai andando ad apportare modifiche ai file jQuery e Modernizr che l'attività uglify sta elaborando. Quindi perché il orologio l'attività risponde solo alle modifiche che non sarebbero mai state avviate per elaborare il tuo JavaScript.
Invece, faremo uso del predefinito compito che può essere impostato nel tuo Gruntfile. Questa è l'attività che verrà eseguita se si utilizza il comando grugnito da solo con niente aggiunto.
Dopo il tuo ultimo grunt.loadNpmTasks linea, ma prima della chiusura ; del file, aggiungi questa riga:
Accentsconagua
grunt.registerTask ('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']); Questo imposta il predefinito compito da eseguire stilo, autoprefixer, cssmin, giada e poi uglify.
Quindi ora se esegui il comando grugnito senza nulla dopo, costruirà l'intero progetto, incluso il tuo JavaScript.
Prossimamente ripeterò il processo che abbiamo appena appreso, ma usando Gulp per gestire il nostro compito in esecuzione invece di Grunt.
