gulp Tutorial
Iniziare con Gulp

Osservazioni

Versioni

Installazione o configurazione

1. Installa Node.js e NPM:

Gulp richiede Node.js e NPM, il gestore di pacchetti di Node. La maggior parte degli installatori include NPM con Node.js. Fare riferimento alla documentazione di installazione o confermare che sia già installato eseguendo il seguente comando nel terminale,

npm -v
// will return NPM version or error saying command not found

2. Installa gulp a livello globale:

Se hai precedentemente installato una versione di gulp a livello globale, esegui npm rm --global gulp per assicurarti che la tua vecchia versione non npm rm --global gulp in collisione con gulp-cli .

$ npm install --global gulp-cli

3. Inizializza la directory del tuo progetto:

$ npm init

4. Installa gulp nel tuo progetto devDependencies:

$ npm install --save-dev gulp

5. Crea un gulpfile.js nella radice del tuo progetto:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. Esegui gulp:

$ gulp

L'attività predefinita verrà eseguita e non farà nulla.

Per eseguire singole attività, utilizzare gulp <task> <othertask> .

Dipendenza delle attività

È possibile eseguire attività in serie, passando un secondo parametro a gulp.task() .

Questo parametro è una serie di attività da eseguire e completare prima dell'esecuzione dell'attività:

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

È inoltre possibile omettere la funzione se si desidera eseguire solo un pacchetto di attività di dipendenza:

gulp.task('build', ['array', 'of', 'task', 'names']);

Nota: le attività verranno eseguite in parallelo (tutte in una volta), quindi non dare per scontato che le attività vengano avviate / completate in ordine. Avviare gulp v4 , gulp.series() dovrebbe essere usato se l'ordine di esecuzione delle attività di dipendenza è importante.

Concat js file nella sottocartella usando gulp

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

deglutire i documenti CLI

bandiere

Gulp ha pochissime bandiere da sapere. Tutti gli altri flag servono per le attività, se necessario.

• -v o --version visualizzerà le versioni globali e locali del gulp
• --require <module path> richiederà un modulo prima di eseguire il file gulp. Questo è utile per i transporter ma ha anche altre applicazioni. È possibile utilizzare più flag - --require
• --gulpfile <gulpfile path> imposterà manualmente il percorso di gulpfile. Utile se hai più gulpfiles. Questo imposterà anche il CWD nella directory gulpfile
• --cwd <dir path> imposterà manualmente il CWD. La ricerca del gulpfile e della relatività di tutti richiederà da qui
• -T o --tasks visualizzerà l'albero delle dipendenze dell'attività per il gulpfile caricato
• --tasks-simple mostrerà un elenco di compiti in chiaro per il gulpfile caricato
• --color forzerà i plugin gulp e gulp per visualizzare i colori anche quando non viene rilevato alcun supporto colore
• --no-color costringerà i plugin gulp e gulp a non visualizzare i colori anche quando viene rilevato il supporto del colore
• --silent disabiliterà la registrazione di gulp

La CLI aggiunge process.env.INIT_CWD, che è il cwd originale da cui è stato lanciato.

Bandiere specifiche dell'attività

Fare riferimento a questo collegamento StackOverflow per informazioni su come aggiungere contrassegni specifici dell'attività

Compiti

Le attività possono essere eseguite eseguendo gulp <task> <othertask> . Basta eseguire gulp per eseguire l'attività che hai registrato chiamata default . Se non ci sono task gulp default verificherà un errore.

I compilatori

Puoi trovare un elenco di lingue supportate da interpretare . Se si desidera aggiungere supporto per una nuova lingua, inviare richiesta pull / aprire i problemi lì.