Gulp - Guida rapida

Cos'è Gulp?

Gulp è un task runner che utilizza Node.js come piattaforma. Gulp utilizza esclusivamente il codice JavaScript e aiuta a eseguire attività front-end e applicazioni web su larga scala. Crea attività automatizzate di sistema come la minimizzazione CSS e HTML, concatenando file di libreria e compilando i file SASS. Queste attività possono essere eseguite utilizzando gli script Shell o Bash sulla riga di comando.

Perché usare Gulp?

È più breve, più semplice e più veloce rispetto ad altri task runner.
Utilizza SASS e LESS come preprocessore CSS.
Aggiorna automaticamente la pagina dopo aver modificato i file di origine.
Facile da capire e costruire il Gulpfile.js perché utilizza il codice JavaScript puro per creare l'attività.

Storia

Tutta la documentazione di Gulp è coperta dalla licenza CC0. Inizialmente, Gulp v1.0.0 è stato rilasciato il 15 gennaio 2015 e la versione corrente di Gulp èv3.9.0.

Caratteristiche

Fornisce minificazione e concatenazione.
Utilizza il codice JavaScript puro.
Converte LESS o SASS in compilation CSS.
Gestisce la manipolazione dei file nella memoria e migliora la velocità utilizzando la piattaforma Node.js.

Vantaggi

Enorme vantaggio di velocità rispetto a qualsiasi altro task runner
Facile da codificare e da capire.
Facile da testare le applicazioni web ..
I plugin sono semplici da usare e sono progettati per fare una cosa alla volta.
Esegue ripetutamente attività ripetitive come la minimizzazione di fogli di stile, la compressione di immagini, ecc.

Svantaggi

Più numero di dipendenze ed è un nuovo arrivato rispetto a Grunt.
Utilizzando i plugin Gulp, non è possibile eseguire più attività.
La configurazione non è pulita come Grunt.

Questo articolo fornisce una procedura passo passo per l'installazione di Gulp.

Requisiti di sistema per Gulp

Operating System - Cross-platform
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Installazione di Gulp

Step 1- Abbiamo bisogno di Node.js per eseguire esempi di Gulp. Per scaricare Node.js, apri il filehttps://nodejs.org/en/, vedrai una schermata come mostrato di seguito -

Scarica l'ultima versione delle funzionalità del file zip.

Step 2- Quindi, esegui il setup per installare i NodeJ sul tuo computer.

Step 3 - È necessario impostare le variabili d'ambiente.

Variabile utente percorso

Fare clic con il tasto destro su Risorse del computer.
Seleziona Proprietà.
Seleziona la scheda Avanzate e fai clic su "Variabili d'ambiente".

Nella finestra Variabili d'ambiente, fare doppio clic sul PERCORSO come mostrato nella schermata seguente.

Verrà visualizzata una finestra Modifica variabile utente come mostrato nello screenshot seguente. Aggiungi il percorso della cartella Node.js nel campo Valore variabile come C: \ Programmi \ nodejs \ node_modules \ npm. Se il percorso è già impostato per altri file, è necessario inserire un punto e virgola (;) dopo e aggiungere il percorso Node.js come mostrato nello screenshot seguente.

Alla fine, fai clic sul pulsante "Ok".

System Variable

In Variabili di sistema, fare doppio clic su Percorso come mostrato nella schermata seguente.

Verrà visualizzata una finestra Modifica variabile di sistema come mostrato nella seguente schermata. Aggiungi il percorso della cartella Node.js nel campo Valore variabile come C: \ Programmi \ nodejs \ e fai clic su "Ok" come mostrato nello screenshot seguente.

Step 4- Apri il prompt dei comandi nel tuo sistema e inserisci il seguente comando. Verrà visualizzata la versione di Node.js installata.

node -v

Step 5- Nel prompt dei comandi, immettere il seguente comando per visualizzare la versione di npm (gestore di pacchetti Node.js) utilizzata per installare i moduli. Verrà visualizzata la versione di Node.js installata.

npm -v

Step 6- Nel prompt dei comandi, inserisci il seguente comando per installare Gulp. L'aggiunta del flag "-g" garantisce che il Gulp sia globalmente disponibile per qualsiasi progetto.

npm install gulp -g

Step 7 - Per verificare che Gulp sia stato installato correttamente, inserisci il seguente comando per visualizzare la versione di Gulp.

gulp -v

In questo capitolo, acquisirai familiarità con alcune nozioni di base relative a Gulp.

Cos'è un sistema di compilazione?

Un sistema di compilazione viene indicato come raccolta di attività (denominate collettivamente come task runners), che automatizzano il lavoro ripetitivo.

Di seguito è riportato un elenco di alcune delle attività che possono essere gestite utilizzando il sistema di compilazione:

Compilazione di CSS e JavaScript preprocessi.
Minimizzazione dei file per ridurne le dimensioni.
Concatenazione di file in uno.
Attivazione del server per il ricaricamento automatico.
Creazione di build di distribuzione per archiviare i file risultanti in un'unica posizione.

Nel moderno flusso di lavoro front-end, il sistema di compilazione funziona con 3 componenti:

Gestori di pacchetti
Preprocessors
Task runner e strumenti di costruzione

Gestori di pacchetti

Viene utilizzato per automatizzare l'aggiornamento dell'installazione, la rimozione delle dipendenze richieste, le librerie pulite e i pacchetti utilizzati nell'ambiente di sviluppo. Esempio per i gestori di pacchetti sonobower e npm.

Preprocessori

I preprocessori sono molto utili per un flusso di lavoro moderno efficiente aggiungendo una sintassi ottimizzata e funzionalità aggiuntive che vengono compilate nella sua lingua madre.

Alcuni dei preprocessori popolari sono:

CSS - SASS, LESS e Stylus.
JS - CoffeeScript, LiveScript, TypeScript, ecc.
HTML - Markdown, HAML, Slim, Jade, ecc.

Task Runners

I task runner automatizzano attività come la conversione da SASS a CSS, minimizzano i file, ottimizzano le immagini e molte altre attività utilizzate nel flusso di lavoro di sviluppo. Gulp è uno dei task runner nel moderno ambiente di lavoro front-end e funziona su Node.

Impostazione del progetto

Per impostare il tuo progetto sul tuo computer, crea una cartella chiamata "lavoro" per esempio. La cartella di lavoro contiene le seguenti sottocartelle e file:

Src - Posizione dei file e delle cartelle di origine HTML preelaborati.
- Images - Contiene immagini non compresse.
- Scripts - Contiene più file di script preelaborati.
- Styles - Contiene più file CSS preelaborati.
Build - Questa cartella verrà creata automaticamente che contiene i file di produzione.
- Images - Contiene immagini compresse.
- Scripts - File di script singolo che contiene codici minimizzati.
- Styles - Singolo file CSS che contiene codici minimizzati.
gulpfile.js - È il file di configurazione, che viene utilizzato per definire le nostre attività.

Nei capitoli precedenti, hai studiato l' installazione di Gulp e le basi di Gulp che includono il sistema di compilazione di Gulp, il gestore dei pacchetti, il task runner, la struttura di Gulp, ecc.

In questo capitolo vedremo le basi per lo sviluppo di un'applicazione, che include quanto segue:

Dichiarazione delle dipendenze richieste
Creazione di attività per le dipendenze
Eseguire l'attività
Guardando l'attività

Dichiarazione delle dipendenze

Quando si installano i plug-in per l'applicazione, è necessario specificare le dipendenze per i plug-in. Le dipendenze sono gestite dal gestore dei pacchetti come bower e npm.

Prendiamo un plugin chiamato gulp-imageminper definirne le dipendenze nel file di configurazione. Questo plugin può essere utilizzato per comprimere il file immagine e può essere installato utilizzando la seguente riga di comando:

npm install gulp-imagemin --save-dev

È possibile aggiungere dipendenze al file di configurazione come mostrato nel codice seguente.

var imagemin = require('gulp-imagemin');

La riga sopra include il plug-in ed è incluso come un oggetto denominato imagemin.

Creazione di attività per dipendenze

Task consente un approccio modulare per la configurazione di Gulp. Dobbiamo creare un'attività per ogni dipendenza, che aggiungiamo man mano che troviamo e installiamo altri plugin. L'attività Gulp avrà la seguente struttura:

gulp.task('task-name', function() {
   //do stuff here
});

Dove "nome-attività" è un nome di stringa e "funzione ()" esegue l'attività. "Gulp.task" registra la funzione come attività all'interno di nome e specifica le dipendenze da altre attività.

È possibile creare l'attività per la dipendenza definita sopra come mostrato nel codice seguente.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Le immagini si trovano in src/images/**/*che viene salvato in img_srcobject. Viene reindirizzato ad un'altra funzione creata dal costruttore di imagemin. Comprime le immagini dalla cartella src e copiate nella cartella build chiamandodest metodo con un argomento, che rappresenta la directory di destinazione.

Esecuzione dell'attività

Il file Gulp è configurato e pronto per l'esecuzione. Utilizzare il seguente comando nella directory del progetto per eseguire l'attività:

gulp imagemin

Eseguendo l'attività utilizzando il comando precedente, vedrai il seguente risultato nel prompt dei comandi:

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Task consente un approccio modulare per configurare Gulp. Dobbiamo creare un'attività per ogni dipendenza, che aggiungeremo quando troviamo e installiamo altri plugin. L'attività Gulp avrà la seguente struttura:

gulp.task('task-name', function() {
   //do stuff here
});

Dove "task-name" è un nome di stringa e "function ()" esegue l'attività. Il "gulp.task" registra la funzione come un'attività all'interno del nome e specifica le dipendenze da altre attività.

Installazione di plugin

Prendiamo un plugin chiamato minify-cssper unire e minimizzare tutti gli script CSS. Può essere installato utilizzando npm come mostrato nel seguente comando:

npm install gulp-minify-css --save-dev

Per lavorare con "gulp-minify-css plugin", è necessario installare un altro plugin chiamato "gulp-autoprefixer" come mostrato nel seguente comando:

npm install gulp-autoprefixer --save-dev

Per concatenare i file CSS, installa gulp-concat come mostrato nel seguente comando:

npm install gulp-concat --save-dev

Dopo l'installazione dei plugin, è necessario scrivere le dipendenze nel file di configurazione come segue:

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Aggiunta di attività al file Gulp

Dobbiamo creare un'attività per ogni dipendenza, che aggiungeremo durante l'installazione dei plugin. L'attività Gulp avrà la seguente struttura:

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Il plug-in "concat" concatena i file CSS e il plug-in "autoprefix" indica la versione corrente e quella precedente di tutti i browser. Minifica tutti gli script CSS dalla cartella src e li copia nella cartella build chiamando il metodo "dest" con un argomento, che rappresenta la directory di destinazione.

Per eseguire l'attività, utilizzare il seguente comando nella directory del progetto:

gulp styles

Allo stesso modo, utilizzeremo un altro plugin chiamato 'gulp-imagemin' per comprimere il file immagine, che può essere installato utilizzando il seguente comando:

npm install gulp-imagemin --save-dev

È possibile aggiungere dipendenze al file di configurazione utilizzando il seguente comando:

var imagemin = require('gulp-imagemin');

È possibile creare l'attività per la dipendenza sopra definita come mostrato nel codice seguente.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Le immagini si trovano in "src / images / ** / *" che vengono salvate nell'img_srcobject. Viene reindirizzato ad altre funzioni create dal costruttore "imagemin". Comprime le immagini dalla cartella src e le copia nella cartella build chiamando il metodo "dest" con un argomento, che rappresenta la directory di destinazione.

Per eseguire l'attività, utilizzare il seguente comando nella directory del progetto:

gulp imagemin

Combinazione di più attività

È possibile eseguire più attività contemporaneamente creando un'attività predefinita nel file di configurazione come mostrato nel codice seguente:

gulp.task('default', ['imagemin', 'styles'], function() {

});

Il file Gulp è configurato e pronto per l'esecuzione. Esegui il seguente comando nella directory del tuo progetto per eseguire le attività combinate sopra:

gulp

Eseguendo l'attività utilizzando il comando precedente, otterrai il seguente risultato nel prompt dei comandi:

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

Il metodo Watch viene utilizzato per monitorare i file di origine. Quando vengono apportate modifiche al file di origine, l'orologio eseguirà un'attività appropriata. Puoi utilizzare l'attività "predefinita" per controllare le modifiche ai file HTML, CSS e JavaScript.

Aggiorna attività predefinita

Nel capitolo precedente hai imparato come inghiottire le attività combinate utilizzando l' attività predefinita. Abbiamo usato gulp-minify-css, gulp-autoprefixer e gulp-concatplugins e abbiamo creato attività di stili per minimizzare i file CSS.

Per guardare il file CSS, dobbiamo aggiornare l'attività "predefinita" come mostrato nel codice seguente:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

Tutti i file CSS in work/src/styles/ verrà controllata e dopo le modifiche apportate a questi file, verrà eseguita l'attività di stili.

Esegui attività predefinita

Esegui l'attività "predefinita" utilizzando il seguente comando.

gulp

Dopo aver eseguito il comando precedente, riceverai il seguente output.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

Ogni volta che vengono apportate modifiche ai file CSS, riceverai il seguente output.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

Il processo Watch rimarrà attivo e risponderà alle modifiche. Puoi premereCtrl+Cper terminare il processo di monitoraggio e tornare alla riga di comando.

Live Reload specifica le modifiche nel file system. BrowserSyncviene utilizzato per visualizzare tutti i file HTML e CSS nella directory CSS ed eseguire il caricamento in tempo reale della pagina in tutti i browser, ogni volta che i file vengono modificati. BrowserSync rende il flusso di lavoro più veloce sincronizzando URL, interazioni e modifiche al codice su più dispositivi.

Installazione del plugin BrowserSync

Il plug-in BrowserSync fornisce l'iniezione CSS cross-browser e può essere installato utilizzando il seguente comando.

npm install browser-sync --save-dev

Configurazione del plugin BrowserSync

Per utilizzare il plug-in BrowserSync, è necessario scrivere la dipendenza nel file di configurazione come mostrato nel comando seguente.

var browserSync = require('browser-sync').create();

È necessario creare un'attività affinché BrowserSync funzioni con il server utilizzando Gulp. Dato che stai eseguendo il server, devi tel BrowserSync sulla radice del tuo server. Qui stiamo usando la directory di base come "build".

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

È inoltre possibile inserire nuovi stili nel browser utilizzando la seguente attività per il file CSS.

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

Prima di creare un'attività per BrowserSync, è necessario installare i plug-in utilizzando il gestore di pacchetti e scrivere le dipendenze nel file di configurazione come definito in questo capitolo .

Quando hai finito con la configurazione, esegui sia BrowserSync che watchTask per il verificarsi dell'effetto di ricarica in tempo reale. Invece di eseguire due righe di comando separatamente, le eseguiremo insieme aggiungendo browserSynctask insieme a watchTask come mostrato nel codice seguente.

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

Esegui il seguente comando nella directory del tuo progetto per eseguire le attività combinate sopra.

gulp

Dopo aver eseguito l'attività utilizzando il comando precedente, otterrai il seguente risultato nel prompt dei comandi.

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

Si aprirà la finestra del browser con l'URL http://localhost:3000/. Qualsiasi modifica apportata al file CSS si rifletterà nel prompt dei comandi e il browser verrà ricaricato automaticamente con gli stili modificati.

In questo capitolo imparerai come ottimizzare CSS e JavaScript. L'ottimizzazione è necessaria per rimuovere i dati non necessari (ad esempio spazi e caratteri non utilizzati) dai file di origine. Riduce le dimensioni dei file e consente loro di caricarsi più velocemente

Installa plugin per ottimizzare CSS e JavaScript

Vai alla directory "work" dalla riga di comando e installa i plug-in "gulp-uglify", "gulp-minify-css" e "gulp-concat" utilizzando il seguente comando:

npm install gulp-uglify gulp-minify-css gulp-concat

Dichiarare le dipendenze e creare attività

Nel tuo file di configurazione gulpfile.js, per prima cosa dichiarare le dipendenze come mostrato nel codice seguente.

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

Successivamente, è necessario creare attività per l'ottimizzazione di CSS e JavaScript come mostrato nel codice seguente.

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

Il js l'attività accetterà .js file da src/scripts/cartella. Concatena e semplifica il filejs file, quindi produce build/scripts/script.js file.

Il CSS l'attività accetterà .css file da src/styles/cartella. Concatena e minimizzaCSS file, quindi produce build/styles/styles.css file.

Esegui le attività

Il file di configurazione è impostato e pronto per l'esecuzione. Utilizzare il seguente comando per eseguire l'attività.

gulp

Eseguendo l'attività utilizzando il comando precedente, riceverai il seguente risultato nel prompt dei comandi.

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

In questo capitolo imparerai come ottimizzare le immagini. L'ottimizzazione ridurrà le dimensioni delle immagini e faciliterà il caricamento.

Installa plugin per ottimizzare le immagini

Vai alla directory "work" dalla riga di comando e installa i plugin "gulp-changed" e "gulp-imagemin" utilizzando i seguenti comandi.

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

Dichiarare le dipendenze e creare attività

Nel tuo file di configurazione gulpfile.js, per prima cosa dichiara le dipendenze come mostrato nel comando seguente.

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

Successivamente, è necessario creare attività per l'ottimizzazione delle immagini come mostrato nel codice seguente.

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

Il imageminl'attività accetterà immagini png, jpg e gif dalla cartella src / images / e le minimizzerà prima di scriverle nella destinazione. Ilchanged()assicura che solo i nuovi file vengano passati ogni volta per la minimizzazione. Il plug -in modificato da gulp elaborerà solo i nuovi file e quindi utilizzerà tempo prezioso.

Esegui le attività

Il file di configurazione è impostato e pronto per l'esecuzione. Utilizzare il seguente comando per eseguire l'attività.

gulp

Eseguendo l'attività utilizzando il comando precedente, riceverai il seguente risultato nel prompt dei comandi.

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp fornisce alcuni plugin utili per lavorare con HTML e CSS, JavaScript, grafica e altre cose come descritto nelle tabelle seguenti.

Plugin HTML e CSS

Sr.No.	Plugin e descrizione
1	autoprefixer Include automaticamente i prefissi alle proprietà CSS.
2	gulp-browser-sync Viene utilizzato per guardare tutti i file HTML e CSS nella directory CSS ed esegue il caricamento in tempo reale della pagina in tutti i browser, ogni volta che i file vengono modificati
3	gulp-useref Viene utilizzato per sostituire i riferimenti a script o fogli di stile non ottimizzati.
4	gulp-email-design Crea modelli di email HTML che converte gli stili CSS in inline.
5	gulp-uncss Ottimizza i file CSS e trova gli stili inutilizzati e duplicati.
6	gulp-csso È un ottimizzatore CSS, che riduce al minimo i file CSS con conseguente dimensione del file inferiore.
7	gulp-htmlmin Riduce al minimo i file HTML.
8	gulp-csscomb Viene utilizzato per creare un formattatore di stile per CSS.
9	gulp-csslint Specifica un linter CSS.
10	gulp-htmlhint Specifica un validatore HTML.

Plugin JavaScript

Sr.No.	Plugin e descrizione
1	gulp-autopolyfiller È uguale all'autoprefixer che include i polyfill necessari per JavaScript.
2	gulp-jsfmt Viene utilizzato per la ricerca di frammenti di codice specifici.
3	gulp-jscs Viene utilizzato per controllare lo stile del codice JavaScript.
4	gulp-modernizr Specifica quali funzionalità HTML, CSS e JavaScript ha da offrire il browser dell'utente.
5	gulp-express Avvia il server web gulp express.js.
6	gulp-requirejs Utilizza require.js per combinare i moduli AMD require.js in un unico file.
7	gulp-plato Genera report di analisi della complessità.
8	gulp-complexity Analizza la complessità e la manutenibilità del codice.
9	fixmyjs Corregge i risultati di JSHint.
10	gulp-jscpd Viene utilizzato come rilevatore di copia / incolla per il codice sorgente.
11	gulp-jsonlint È un validatore JSON.
12	gulp-uglify Minifica i file JavaScript.
13	gulp-concat Concatena i file CSS.

Plugin per i test delle unità

Sr.No.	Plugin e descrizione
1	gulp-nodeunit Esegue test di unità di nodo da Gulp.
2	gulp-jasmine Viene utilizzato per segnalare le problematiche relative all'output.
3	gulp-qunit Fornisce l'output della console di base per i test QUnit e utilizza il modulo del nodo PhantomJS e il plug-in QUnit del runner PhantomJS.
4	gulp-mocha Specifica l'involucro sottile attorno a Mocha ed esegue i test Mocha.
5	gulp-karma È stato deprecato a Gulp.

Plugin grafici

Sr.No.	Plugin e descrizione
1	gulpicon Genera sprite da SVG e li converte in PNG.
2	gulp-iconfont Viene utilizzato con i caratteri Web per creare file WOFF, EOT, TTF da SVG.
3	gulp-imacss Trasforma i file immagine in URI di dati e li inserisce in un unico file CSS.
4	gulp-responsive Genera immagini reattive per diversi dispositivi
5	gulp-sharp Viene utilizzato per modificare e ridimensionare l'orientamento e lo sfondo dell'immagine.
6	gulp-svgstore Combina i file SVG in uno con gli elementi <symbol>.
7	gulp-imagemin & gulp-tinypng Viene utilizzato per comprimere le immagini come PNG, JPEG, GIF, SVG.
8	gulp-spritesmith Viene utilizzato per creare un foglio sprite da un insieme di immagini e variabili CSS.

Plugin dei compilatori

Sr.No.	Plugin e descrizione
1	gulp-less Fornisce MENO plugin per Gulp.
2	gulp-sass Fornisce il plugin SASS per Gulp.
3	gulp-compass Fornisce plug-in bussola per Gulp.
4	gulp-stylus Viene utilizzato per mantenere lo stilo in CSS.
5	gulp-coffee Fornisce plugin coffeescript per Gulp.
6	gulp-handlebars Fornisce plugin per manubri per Gulp.
7	gulp-jst Fornisce modelli di sottolineatura in JST.
8	gulp-react Specifica i modelli di Facebook React JSX in JavaScript.
9	gulp-nunjucks Specifica i modelli Nunjucks in JST.
10	gulp-dustjs Specifica i modelli Dust in JST.
11	gulp-angular-templatecache Specifica i modelli AngularJS nella templateCache.

Altri plugin

Il plug-in gulp-clean rimuove file e cartelle e il plug-in gulp-copy copia i file dall'origine alla nuova destinazione.

Sr.No.	Plugin e descrizione
1	gulp-grunt Esegue le attività Grunt da Gulp
2	gulp-watch Controlla i file ogni volta che vengono apportate modifiche.
3	gulp-notify Notifica il messaggio di errore ogni volta che un'attività non riesce.
4	gulp-git Permette di utilizzare i comandi Git.
5	gulp-jsdoc Crea documentazione JavaScript per Gulp.
6	gulp-rev Fornisce la revisione statica degli asset ai nomi dei file.
7	gulp-bump Aumenta le versioni nel pacchetto JSON.
8	gulp-bower-files Viene utilizzato per iniettare pacchetti bower.
9	gulp-removelogs Rimuove le istruzioni console.log.
10	gulp-preprocess Preelabora HTML, JavaScript e altri file in base al contesto o alla configurazione dell'ambiente.
11	gulp-duration Specifica la durata delle attività Gulp.
12	gulp-changed & gulp-newer Esegue i file modificati e quelli più recenti.
13	gulp-connect Viene utilizzato per eseguire un server Web con LiveReload.
14	gulp-shell Esegue i comandi della shell.
15	gulp-ssh Si connette utilizzando attività SSH e SFTP.
16	gulp-zip Comprime i file e le cartelle.
17	gulp-clean e gulp-copy
18	gulp-filesize Specifica la dimensione del file in formato leggibile dall'uomo.
19	gulp-util Fornisce utilità per i plugin gulp.

In questo capitolo imparerai come pulire i file generati. Poiché stiamo generando automaticamente i file, assicurati che i file non necessari vengano eliminati prima di eseguire la build. Questa procedura è chiamatacleaning. Ildel plugin può essere utilizzato per questo scopo.

Installazione di plugin del

Nella tua riga di comando installa il plugin inserendo il seguente comando.

npm install del --save-dev

Dichiarare le dipendenze e creare attività

Nel tuo file di configurazione gulpfile.js, dichiara le dipendenze come mostrato nel seguente comando.

var del = require('del');

Successivamente, crea un'attività come mostrato nel codice seguente.

gulp.task('clean:build', function() {
   return del.sync('build');
});

L'attività precedente pulirà l'intera build. L'attività pulita cancella qualsiasi immagine catturata e rimuove tutti i vecchi file presenti nella build.

È possibile pulire solo file o cartelle specifici e lasciarne intatti alcuni come illustrato nel codice seguente.

gulp.task('clean:build', function() {
   //return del.sync('build');
   return del([
      'build/temp/',
      // instructs to clean temp folder
      '!build/package.json'
      // negate to instruct not to clean package.json file ]);
});

Nell'attività precedente, solo il file temp la cartella verrà pulita lasciando package.json intatto.

↰ Previous page

Gulp - Guida rapida

Cos'è Gulp?

Perché usare Gulp?

Storia

Caratteristiche

Vantaggi

Svantaggi

Requisiti di sistema per Gulp

Installazione di Gulp

Variabile utente percorso

Cos'è un sistema di compilazione?

Gestori di pacchetti

Preprocessori

Task Runners

Impostazione del progetto

Dichiarazione delle dipendenze

Creazione di attività per dipendenze

Esecuzione dell'attività

Installazione di plugin

Aggiunta di attività al file Gulp

Combinazione di più attività

Aggiorna attività predefinita

Esegui attività predefinita

Installazione del plugin BrowserSync

Configurazione del plugin BrowserSync

Installa plugin per ottimizzare CSS e JavaScript

Dichiarare le dipendenze e creare attività

Esegui le attività

Installa plugin per ottimizzare le immagini

Dichiarare le dipendenze e creare attività

Esegui le attività

Plugin HTML e CSS

Plugin JavaScript

Plugin per i test delle unità

Plugin grafici

Plugin dei compilatori

Altri plugin

Installazione di plugin del

Dichiarare le dipendenze e creare attività

Gulp Tutorial

Gulp Risorse utili