Share
Nel tutorial precedente abbiamo impostato un progetto e usato Grunt per guardare e compilare automaticamente Stylus e Jade. In questo tutorial faremo lo stesso, ma usando un altro task runner: Gulp.
Installa Gulp globalmente con:
[sudo] npm install gulp -g
Come nel caso del processo Grunt, aggiungi un file "package.json" al tuo progetto usando il npm init comando.
Installa Gulp nel tuo progetto e salvalo come dipendenza di sviluppo con:
npm install gulp --save-dev
In parallelo al "Gruntfile" di Grunt, Gulp utilizza un "Gulpfile". Alla cartella principale del tuo "Gulp Project" aggiungi un file chiamato "gulpfile.js".
Per iniziare, daremo al file l'accesso al pacchetto "gulp" che hai appena installato nella tua cartella "node_modules", aggiungendo questa linea all'inizio del tuo Gulpfile:
Accentsconagua
var gulp = require ('gulp');A rigor di termini, Gulp in realtà non lo fa bisogno usare i plugin Gulp perché può effettivamente fare uso di pacchetti npm vanilla. Tuttavia, ci sono diversi plugin disponibili che sono specificatamente ottimizzati per l'uso con Gulp e, quando inizi, troverai questi più facili da usare.
Cerca i plugin Gulp su: http://gulpjs.com/plugins/
Installeremo questi plugin:
Questi plugin svolgono essenzialmente gli stessi ruoli di quelli che usavamo con Grunt, con un paio di differenze.
Uno, non abbiamo bisogno di installare un plugin "watch" come Gulp ne ha uno integrato.
Due, stiamo installando il plugin "gulp-concat" per riunire tutti i nostri file (concatenandoli) prima di ridimensionare l'intero lotto. Grazie a Dan per averlo indicato!
Nota: stiamo usando un plugin chiamato "gulp-minify-css" ma utilizza lo stesso pacchetto "clean-css" che hai usato finora.
Con il tuo terminale puntato sulla tua cartella "Gulp Project" esegui ognuno di questi comandi:
npm installa gulp-stylus --save-dev
npm install gulp-autoprefixer --save-dev
npm installa gulp-minify-css --save-dev
npm installa gulp-jade --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
Quando hai finito, dovresti vedere queste cartelle all'interno della cartella "node_modules" del tuo progetto:
Più o meno… Proprio come abbiamo fatto con Grunt, dobbiamo abilitare ognuno dei plugin, questa volta nel nostro Gulpfile. Invece del metodo di Grunt grunt.loadNpmTasks, useremo il richiedere funzione nativa di NodeJS.
Aggiungi queste linee al tuo Gulpfile, sotto la riga che hai già aggiunto.
var stylus = require ('gulp-stylus'); var autoprefixer = require ('gulp-autoprefixer'); var minifyCSS = require ('gulp-minify-css'); var jade = require ('gulp-jade'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); var concat = require ('gulp-concat');Questo approccio è diverso da Grunt in quanto non abbiamo ancora registrato alcun comando che possa essere eseguito in questa fase. Piuttosto, abbiamo appena creato le variabili JavaScript, ciascuna delle quali rappresenta i nostri plugin, che possiamo utilizzare successivamente nel nostro Gulpfile.
Una delle principali differenze tra Grunt e Gulp è che con Gulp non è necessario configurare individualmente un'attività per ogni plug-in che si sta utilizzando nel progetto. Invece, si configurano solo le attività per il reale comandi tu vuoi correre.
Nel nostro Gruntfile in precedenza abbiamo impostato un task separato ciascuno per Stylus, Autoprefixer e clean-css. Nel nostro Gulpfile non abbiamo bisogno di farlo. Sappiamo che ogni volta che compiliamo il nostro codice Stylus vogliamo che il CSS risultante sia autoprefisso e minimizzato, quindi creeremo una sola attività per fare tutte queste cose contemporaneamente.
Aggiungi questo codice alla fine del tuo Gulpfile:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rinomina ('style.css')) .pipe (gulp.dest ('build')));Analizziamo ciò che abbiamo fatto.
Per prima cosa, stiamo usando gulp.task () per definire una nuova attività denominata css, e facendo spazio per una funzione JavaScript che verrà eseguita ogni volta che eseguiremo il comando gulp css:
gulp.task ('css', function () );Successivamente, stiamo usando gulp.src () per impostare il file sorgente che vogliamo elaborare nel file "source / stylus / main.styl":
gulp.task ('css', function () gulp.src ('source / stylus / main.styl'));Quindi, iniziamo a utilizzare Gulp's tubo() funzione per chiamare su ciascuno dei nostri plugin. La viatubo() funziona come un tubo fisico, dove si alimenta qualcosa nel primo tubo e poi passa attraverso ogni tubo collegato.
Il nostro primo "pipe" aggiunge la compilation Stylus, usando lo stesso comprimere e percorsi opzioni come abbiamo fatto quando lavoravamo con Grunt in precedenza:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus']))) ;Quindi colleghiamo una seconda pipe, che prende il codice compilato e aggiunge la correzione automatica:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus'])) .pipe (autoprefixer ()));Colleghiamo un terzo tubo, prendendo il nostro prefisso CSS e pulendolo:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()));A questo punto, se dovessimo generare un file CSS, sarebbe chiamato "main.css" per corrispondere al file "main.styl" di origine con cui abbiamo iniziato. Quindi collegheremo un quarto pipe per rinominare il file con cui andremo a "style.css":
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rinomina ('style.css')));Infine, colleghiamo il nostro quinto ed ultimo tubo per inviare il nostro file CSS finito alla sua destinazione, usando gulp.dest () per impostare la cartella di output in modo che sia "build".
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rinomina ('style.css')) .pipe (gulp.dest ('build')));Ora il css l'attività appena creata è pronta per essere eseguita. Esegui nella cartella principale del tuo progetto:
gulp css
... e il tuo file Stylus verrà compilato, autoprefixed e pulito, quindi verrà stampato nella cartella "build" come "style.css".
Utilizzeremo di nuovo la stessa procedura per impostare il nostro compito per la compilazione di Jade. Creeremo un compito chiamato html, impostalo per usare tutti i file ".jade" nella cartella "source / jade" come sorgente, pipe attraverso la compilazione Jade, quindi invia i file HTML risultanti alla nostra cartella "build".
Aggiungi questo codice sotto il css compito che hai appena creato:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Esegui la tua nuova attività con il comando:
gulp html
... e vedrai ognuno dei tuoi file Jade compilati in corrispondenti file HTML nella tua cartella "build".
Ora utilizzeremo lo stesso approccio ancora una volta, impostando un'attività chiamata js per prendere i file jQuery e Modernizr dalla nostra cartella "bower_components", uglify (concatenare e minimizzare), quindi inviare il codice come file "output.min.js" alla nostra cartella "build".
gulp.task ('js', function () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat ('output.min. js ')) // concat estrae tutti i nostri file prima di ridimensionarli .pipe (uglify ()) .pipe (gulp.dest (' build ')));Nota: in questo caso vogliamo specificare due file sorgente, quindi stiamo passando i due nomi di file come array, cioè i valori separati da virgole tra parentesi quadre.
Esegui il tuo js compito con il comando
gulp js
... e vedrai apparire un nuovo file chiamato "output.min.js" nella tua cartella "build", contenente jQuery e Modernizr in forma miniata.
Ora che abbiamo la nostra abitudine css e html configurazione delle attività, possiamo usare Gulp's in builtgulp.watch () funzione in modo che funzionino automaticamente per noi.
Aggiungi questo codice nella parte inferiore del tuo Gulpfile per creare un orologio compito:
gulp.task ('watch', function () gulp.watch ('source / stylus / *. styl', ['css']); gulp.watch ('source / jade / *. jade', ['html ']););Il primo uso di gulp.watch () imposta il css compito da eseguire ogni volta che viene modificato un file ".styl" all'interno della cartella "source / stylus".
Il secondo uso di gulp.watch () imposta il html compito da eseguire ogni volta che viene modificato un file ".jade" all'interno della cartella "source / jade".
Esegui il tuo orologio compito con il comando
gulp watch
... e ogni volta che salvi le modifiche a uno dei tuoi file Stylus o Jade, la compilation verrà gestita automaticamente.
Proprio come abbiamo fatto con il nostro progetto Grunt, concludiamo creando un'attività predefinita che verrà eseguita ogni volta che usiamo il comando sorso da solo.
Aggiungi questa linea alla fine del tuo Gulpfile:
gulp.task ('default', ['css', 'html', 'js']);Stiamo usando questo compito per costruire il nostro intero progetto, incluso il JavaScript, facendolo girare css, html e js compiti.
Per costruire l'intero progetto con l'attività predefinita, utilizzare il comando:
sorso
Prossimamente aggiungeremo il tocco finale ai tuoi progetti Grunt e Gulp che li renderanno davvero macchine di ultima generazione, e cioè il caricamento in tempo reale e la sincronizzazione del browser.
Imparerai come creare un comando che avvia il tuo progetto su un'anteprima localhost, ovvero simula un host web sulla tua macchina locale usando un http: // protocollo invece di afile:// protocollo per visualizzare in anteprima il tuo sito.
E mentre i tuoi file di origine del progetto vengono guardati per le modifiche e compilati automaticamente, l'anteprima dell'host locale verrà ricaricata automaticamente in modo che subito dopo aver salvato le modifiche le vedrai riflesse nel browser.
Inoltre, configureremo l'anteprima dell'host locale in modo che tutti i browser che visualizzi verranno sincronizzati, inclusi i browser su dispositivi diversi sulla stessa connessione Internet, come tablet e telefoni. Aprire un menu in un browser, vedere come risponde in ogni altro browser e dispositivo allo stesso tempo.
!
