Share
I vantaggi dei corridori delle attività nello sviluppo del software sono evidenti. Aiutano ad automatizzare attività comuni, spesso noiose e ti permettono di concentrarti su cose più importanti, come scrivere codice fantastico. Seriamente, la capacità di automatizzare attività come compressione delle immagini, minificazione, test delle unità e molto altro è un enorme risparmio di tempo.
Per molti sviluppatori front-end, il goto task runner fino ad oggi è stato Grunt che ti ha permesso di definire le tue attività utilizzando JavaScript all'interno di un file chiamato Gruntfile.js (AKA a Gruntfile). Fondamentalmente, se conoscessi JavaScript, impostare un'attività Grunt era un processo abbastanza semplice e l'ampiezza dei plug-in di terze parti per altri strumenti come JSHint, Sass e Uglify lo rende uno degli strumenti più flessibili disponibili.
Per la maggior parte, Grunt è stato il runner di scelta, ma recentemente uno nuovo di nome Gulp.js ha ricevuto molta attenzione per la sua facilità di configurazione e il suo formato di file di configurazione incredibilmente facile che lo rende facilmente leggibile e gestibile.
In questo tutorial, ti mostrerò come installare Gulp e creare un semplice file di configurazione per bagnarti i piedi con questo fantastico nuovo runner di attività.
Gulp.js è un programma di attività basato su nodo proprio come Grunt e come tale, avrai bisogno di avere Node.js installato per usarlo. Questo potrebbe essere fatto in diversi modi, specialmente in base al tuo sistema operativo. Essendo su OS X, ho scelto di usare nvm, l'impressionante script di Tim Caswell per la gestione di più versioni di Node.js. È inoltre possibile scaricare i file binari direttamente dal sito Node.js. Se sei completamente nuovo su Node.js, assicurati di dare un'occhiata alla serie Nettuts + per aggiornarti su Node.js.
Gulp.js viene fornito come un modulo Node che lo rende incredibilmente facile da installare usando npm (Node Package Manager). Per installare Gulp, apri il tuo terminale e digita quanto segue:
npm install -g gulp
Questo tira Gulp dal npm registro e lo configura globalmente sul tuo sistema in modo da poter accedere tramite la riga di comando.
A tutti gli effetti, Gulp.js è installato a questo punto e sei pronto per iniziare a utilizzarlo con i tuoi progetti.
Per usare Gulp nel tuo progetto ci sono un paio di cose chiave che devono essere fatte:
Questi passaggi devono essere eseguiti all'interno della directory del progetto in modo che i pacchetti e i file di configurazione siano disponibili per Gulp.
Innanzitutto, consente di installare le dipendenze:
npm install --save-dev gulp gulp-util
Ora, dovremo installare i plugin Gulp che eseguiranno le attività che definiremo nel nostro file di configurazione. Questi plugin sono anche moduli del pacchetto Node, quindi li useremo npm di nuovo per installarli.
Installa npm --save-dev gulp-uglify gulp-concat
Nel mio caso, sto installando due plugin che mi permetteranno di minimizzare / comprimere il mio codice JavaScript usando il compressore Uglify.js e concatenare tutti i miei file JavaScipt in un unico file sorgente.
Si noti che ho usato il --save-dev flag per installare le dipendenze di Gulp e i plugin necessari per il mio progetto. Questo assicura che una voce per ognuno sia fatta nella mia lista devDependencies all'interno della mia package.json file come questo:
"devDependencies": "gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify": "~ 0.2.0", "gulp-concat": " ~ 2.1.7 "
Ciò garantisce che qualsiasi dipendenza del pacchetto per questo progetto possa essere facilmente installata in seguito utilizzando npm. Se non hai un package.json file nel tuo progetto, basta digitare npm init nella riga di comando o apri un nuovo file nel tuo editor, includi l'apertura e la chiusura di parentesi graffe all'interno e salvalo come "pacchetto.json". Quindi rieseguire il npm comandi elencati sopra per aggiornarlo. Si noti che è necessario aggiungere le parentesi graffe. Altrimenti, quando provi a usare il --save-dev bandiera, npm genererà un errore dicendo che non è un file JSON valido.
Mentre sto usando solo due plugin per il mio tutorial, Gulp offre oltre 200 plugin per tutti i tipi di funzionalità, tra cui:
e tanti altri.
Come Grunt, Gulp ha un file di configurazione omonimo chiamato gulpfile.js che definisce tutti i plug-in richiesti insieme alle attività che verranno eseguite. Dovrai creare un file chiamato nella root della cartella del tuo progetto.
La sintassi è semplice e concisa, rendendola molto leggibile e facilmente comprensibile:
Accentsconagua
var gulp = require ('gulp'), gutil = require ('gulp-util'), uglify = require ('gulp-uglify'), concat = require ('gulp-concat'); Questo dice semplicemente a Gulp quali plugin sono necessari per completare le attività definite.
Quindi, dobbiamo definire le attività che verranno eseguite da Gulp. Nel mio caso, sto cercando di fare due cose:
Definire un'attività è per tutti gli effetti una chiamata JavaScript. Usiamo il metodo Gulp compito() per definire l'attività che vogliamo eseguire:
gulp.task ('js', function () gulp.src ('./js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')) .pipe (gulp. dest ('./ js'));); Guardando il codice sopra, c'è un mix di chiamate di metodo dai plugin che ho specificato come richiesto. Il primo metodo, compito(), prende un nome semantico per l'attività (in questo caso 'js') e una funzione anonima che contiene la carne reale. Analizziamo il codice:
gulp.src (' ./ js / *. js') Il src () metodo permettimi di specificare dove trovare i file JavaScript che vorrei comprimere e li trasformo in uno stream che rappresenta una struttura di file che può essere passata ai plug-in per l'elaborazione. Questo fa parte dell'API di Streams di Node.js e uno dei motivi per cui la capacità di Gulp di avere una sintassi API concisa e concisa.
.tubo (uglify ())
Il tubo() metodo prende il flusso sorgente derivato dal src () metodo e lo passa al plugin specifico a cui viene fatto riferimento. In questo esempio, il plugin uglify riceverà il flusso di origine.
.tubi (concat ( 'all.js'))
Come uglify, il plugin concat riceve il flusso sorgente tramite tubo() metodo e concatena tutti i file JavaScript in un unico file chiamato "all.js"
.tubi (gulp.dest (' ./ js')); Finalmente, usando Gulp's dest () metodo, all.js è scritto nella mia cartella di destinazione. Il processo se molto semplice e molto leggibile.
L'ultima cosa che dobbiamo fare è aggiornare l'attività di Gulp predefinita per eseguire la nostra attività "js".
gulp.task ('default', function () gulp.run ('js');); Tornando alla riga di comando e digitando 'sorso', Gulp trova il gulpfile.js file, carica eventuali plug-in e dipendenze necessari, avvia l'attività predefinita e esegue il mio 'Js' compito. Puoi vedere il risultato finale qui della minificazione e concatenazione del mio file JavaScript jQuery:
Facendo un ulteriore passo avanti, Gulp fornisce anche un altro metodo chiamato orologio() che fornisce un mezzo per controllare automaticamente una risorsa specifica per le modifiche. Ciò consente una grande automazione delle attività rispetto alla costante necessità di digitare manualmente 'sorso' alla riga di comando.
gulp.watch ('./ js / *', function () gulp.run ('js');); Quando viene eseguito, Gulp continuerà a monitorare direttamente le informazioni specificate per le modifiche ai file e, se si verifica una modifica, eseguirà nuovamente 'Js' compito di minimizzare e concatenare i file JavaScript. Molto bello!
Quando ho sentito parlare di Gulp, la mia prima reazione è stata "Oh, fratello, un altro strumento!". Boy ero fuori. Gulp.js ha davvero una sintassi e un'API avvincenti che rendono semplicissima la configurazione delle tue attività. Anche se non ha l'ampiezza dei plugin di Grunt, il suo repository di plug-in sembra essere in crescita con una bella clip, specialmente ora con così tanto interesse per gli sviluppatori.
Ho già parlato con molti sviluppatori che stanno migrando attivamente ad esso, quindi sembra che sia un buon momento per entrare in Gulp.js.
