gulp setup

Das perfekte Gulp -Setup

Dieses Projekt zielt darauf ab, ein modulares und konfigurierbares Gulp -Setup zu erstellen. Holen Sie sich die Projektautomatisierung mit minimaler Beteiligung. Gulp-Setup wird von @alexgrozav geschrieben und gepflegt.

 npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev

Probe gulpfile.js

Das Einrichten von Gulp mit Gulp-Setup ist einfacher als je zuvor.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; 

Standardaufgaben

Standardmäßig wird Gulp-Setup mit einer Vielzahl vorgefertigter Aufgaben gebündelt.

 gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync

Schluck

In der default wird eine Folge von build , browser-sync und watch ausgeführt, wie Sie es normalerweise in Gulp tun würden.

Schlupfbau

Standardmäßig wird die Build -Aufgabe die clean Aufgabe ausführen, wonach sie alle anderen Aufgaben ausführt, die einen pattern liefern.

Schlucken sauber

Diese Aufgabe entfernen die vorhandenen Build- und Dist -Ordner.

Schlupfuhr

Die watch -Aufgabe wird nach Änderungen beobachten und jede Aufgabe neu aufbauen, die einen pattern liefert. Darüber hinaus erstellt gulp-setup ein partials graph , in dem jede Datei wieder aufgebaut wird, die von dem abhängt, der sich geändert hat.

Schlupfspin

Diese Aufgabe wird jede Aufgabe ausführen, die mit -lint endet.

Schluck html

Kopiert .html -Dateien in den Build -Ordner, mindert sie dann und gibt sie in Dist aus.

Gulp CSS

Autoprefixes .css -Dateien und gibt sie in den Build -Ordner aus, minifikiert sie dann und gibt sie in Dist aus.

Schlucken Sass

Kompiliert und autoprefixes .sass und .scss -Dateien und gibt sie in den Build -Ordner aus, minifiert sie dann und gibt sie in Dist aus.

_{Diese Aufgabe nutzt das partials graph , was bedeutet, dass Änderungen eines Teils einen Umbau in den übergeordneten Dateien auslösen.}

Schlupfstil

Kompiliert und autoprefixes .styl und gibt sie in den Build -Ordner aus, mindert sie dann und gibt sie in Dist aus. Die Stylus-Instanz bietet auch rucksack-css Funktionalität.

_{Diese Aufgabe nutzt das partials graph , was bedeutet, dass Änderungen eines Teils einen Umbau in den übergeordneten Dateien auslösen.}

Schlupf JavaScript

Kompiliert ES6 .js -Dateien und gibt sie in den Build -Ordner aus, minimiert sie dann und gibt sie in Dist aus. Die javascript -Aufgabe kann entweder webpack oder browserify verwenden, um die Dateien zu verarbeiten und zu bündeln, die mit dem Parameter options.bundler angegeben sind (wie im folgenden Konfigurationsbeispiel).

_{Diese Aufgabe nutzt das partials graph , was bedeutet, dass Änderungen eines Teils einen Umbau in den übergeordneten Dateien auslösen.}

Gulp Coffeescript

Kompiliert .coffee -Dateien und gibt sie in den Build -Ordner aus, mindert sie dann und gibt sie in Dist aus. Genau wie in der javascript -Aufgabe können Sie entweder webpack oder browserify verwenden, um die Dateien zu bündeln.

_{Diese Aufgabe nutzt das partials graph , was bedeutet, dass Änderungen eines Teils einen Umbau in den übergeordneten Dateien auslösen.}

Gulp TypeScript

Kompiliert .ts -Dateien und gibt sie in den Build -Ordner aus, mindert sie dann und gibt sie in Dist aus. Genau wie in der javascript -Aufgabe können Sie entweder webpack oder browserify verwenden, um die Dateien zu bündeln.

_{Diese Aufgabe nutzt das partials graph , was bedeutet, dass Änderungen eines Teils einen Umbau in den übergeordneten Dateien auslösen.}

Schlupfbilder

Optimiert .svg , .jpg , .png und .gif -Dateien und geben sie in die Build- und Dist -Ordner aus.

Gulp -Schriftarten

Kopien .eot , .svg , .ttf , .woff und .woff2 -Dateien zu den Build- und Dist -Ordnern.

Konfiguration

Hier ist eine Beispielkonfiguration für Gulp-Setup, die die Optionen für die vorhandene Standard- javascript Aufgabe festlegt und eine neue Gulp-Aufgabe erstellt, die javascript-ext bezeichnet wird, indem die Basis javascript Aufgabe erweitert wird. Sie können die Standard -Aufgabenparameter bei der Erweiterung einer Aufgabe überschreiben.

Der tasks Object -Taste definiert den Namen der Gulp -Aufgabe.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  paths : {
    src : 'path/to/src' ,
    build : 'path/to/build' ,
    dist : 'path/to/dist'
  } ,
  cache : true ,
  debug : true ,
  tasks : {
    'javascript' : {
      options : {
        bundler : 'webpack'
      }
    } ,
    'javascript-ext' : {
      extends : 'javascript' ,
      paths : {
        src : 'path/to/custom-src'
      }
    }
  }
} ) ; 

Eine Aufgabe schreiben

Die in Gulp-Setup vorhandenen Aufgaben bestehen aus zwei Komponenten: process und base . Alle anderen Parameter, wie z. pattern , werden in diesen Komponenten zur Verfügung gestellt.

 const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  tasks : {
    'mytask' : {
      base : './bases/base' ,
      process : './tasks/mytask' ,
      pattern : '**/*.css' ,
      paths : {
        src : 'path/to/custom-src' ,
        build : 'path/to/custom-build' ,
        dist : 'path/to/custom-dist'
      }
    }
  }
} ) ;

Grundaufgaben

Die base dient als Vorlage für andere Aufgaben. Es stellt vier Pipeline -Haken zur Verfügung: init , build , dist und end um einen Prozess in ihn zu integrieren. Wenn die base fehlt, wird der process als eigenständige Aufgabe angesehen und verwendet keine Vorlage.

 // bases/base.js

module . exports = ( $ , gulp , config , task ) => ( ) =>
  gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
    . pipe ( task . process . init ( ) )     // Initialization hook
    . pipe ( $ . debug ( ) )
    . pipe ( task . process . build ( ) )    // Building hook
    . pipe ( gulp . dest ( config . task . build || config . paths . build ) )
    . pipe ( task . process . dist ( ) )     // Distribution hook
    . pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
    . pipe ( task . process . end ( ) ) ;     // Ending hook

Das Gulp-Setup-Paket bietet Ihnen die folgenden vorgefertigten Basen: gulp-setup/bases/base , gulp-setup/bases/compile und gulp-setup/bases/lint . Sie können diese Basen für Ihre benutzerdefinierten Prozessaufgaben verwenden.

Prozessaufgaben

Die Prozessaufgabe ist die Hauptverarbeitung, mit der sich die Aufgabe befasst. Prozessaufgaben verwenden normalerweise eine Vorlage , eine base , in die sie initieren, indem sie init , build , dist oder end bereitstellen. Alternativ können Sie den Prozess als eigenständige Gulp -Aufgabe schreiben.

Vorlage

 // tasks/mytask.js

module . exports = ( $ , gulp , config , task ) => ( {
  build : $ . lazypipe ( )
    . pipe ( $ . autoprefixer ) ,
  dist : $ . lazypipe ( )
    . pipe ( $ . cssmin )
} ) ;

Eigenständig

 // tasks/myclean.js

module . exports = ( $ , gulp , config , task ) => {
  return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
    . pipe ( $ . clean ( ) ) ;
} 

Beiträge, Fehler und Feature -Anfragen

Haben Sie einen Fehler oder eine Funktionsanforderung? Bitte lesen Sie zuerst die Ausgaberichtlinien und suchen Sie nach vorhandenen und geschlossenen Problemen. Wenn Ihr Problem oder Ihre Idee noch nicht behandelt wird, öffnen Sie bitte ein neues Problem.