gulp setup

完美的溝渠設置

該項目旨在創建一個模塊化和可配置的Gulp設置。以最小的參與來啟動和運行項目自動化。 Gulp-Setup由@AlexGrozav編寫和維護。

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

樣本gulpfile.js

使用Gulp-Setup設置Gulp比以往任何時候都更簡單。

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

默認任務

默認情況下，Gulp-Setup捆綁了各種預製任務。

 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

g

default任務將運行一系列build ， browser-sync和watch ，就像您通常在Gulp中所做的那樣。

灣建造

默認情況下，構建任務將執行clean任務，之後它運行所有其他提供pattern參數的任務。

吞噬清潔

此任務將刪除現有的構建和DIST文件夾。

墨西哥手錶

watch任務將注意更改並重建任何提供pattern參數的任務。除此之外， gulp-setup還創建了partials graph ，該圖將重建任何取決於更改的文件的文件。

吞噬棉絨

此任務將運行以-lint結尾的任何任務。

灣HTML

將.html文件複製到構建文件夾，然後將其更改並在Dist中輸出。

Gulp CSS

自動修復文件.css文件並將它們輸出到構建文件夾中，然後將它們更改並在DIST中輸出。

墨西哥雜物

編譯和自動固定文件.sass和.scss文件並將它們輸出到構建文件夾中，然後將它們更改並在DIST中輸出。

_{此任務利用了partials graph ，這意味著部分上的任何更改都會觸發父文件的重建。}

Gulp手寫筆

編譯和自動修復裝置.styl文件並將它們輸出到構建文件夾中，然後將其更改並在Dist中輸出。 Stylus實例還提供rucksack-css功能。

_{此任務利用了partials graph ，這意味著部分上的任何更改都會觸發父文件的重建。}

gulp javaScript

編譯ES6 .js文件並將它們輸出到構建文件夾中，然後將其簡化並在DIST中輸出。 javascript任務可以使用webpack或browserify來處理和捆綁文件，並使用options.bundler參數指定（如下配置示例中所示）。

_{此任務利用了partials graph ，這意味著部分上的任何更改都會觸發父文件的重建。}

大量的咖啡本

編譯.coffee文件並將它們輸出到構建文件夾中，然後將它們更改並在DIST中輸出。就像在javascript任務中一樣，您可以使用webpack或browserify來捆綁文件。

_{此任務利用了partials graph ，這意味著部分上的任何更改都會觸發父文件的重建。}

Gulp打字稿

編譯.ts文件並將它們輸出到構建文件夾中，然後將它們更改並在DIST中輸出。就像在javascript任務中一樣，您可以使用webpack或browserify來捆綁文件。

_{此任務利用了partials graph ，這意味著部分上的任何更改都會觸發父文件的重建。}

大量圖像

優化.svg ， .jpg ， .png和.gif文件並將它們輸出到構建和DIST文件夾中。

gulp字體

副本.eot ， .svg ， .ttf ， .woff和.woff2文件置於構建和DIST文件夾。

配置

這是Gulp-Setup的示例配置，該配置為現有默認javascript任務設置選項，並通過擴展基本javascript One來創建一個稱為javascript-ext的新的Gulp任務。擴展任務時，您可以覆蓋任何默認任務參數。

tasks對象密鑰定義了GULP任務的名稱。

 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'
      }
    }
  }
} ) ; 

寫任務

GULP設定中存在的任務由兩個組件組成： process和base 。所有其他參數（例如pattern ）都可以在這些組件中提供。

 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'
      }
    }
  }
} ) ;

基本任務

base任務是其他任務的模板。它使四個管道掛鉤可用： init ， build ，區域和end ，以將過程集成到其中。如果丟失了base任務，則該process被視為獨立任務，並且不會使用模板。

 // 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

GULP-SETUP軟件包為您提供以下預製基礎： gulp-setup/bases/base ， gulp-setup/bases/compile和gulp-setup/bases/lint 。您可以將這些基礎用於自定義過程任務。

過程任務

過程任務是任務關注的主要處理。流程任務通常使用模板，即通過提供init ， build ， dist或end鉤來集成的base任務。另外，您可以將該過程作為獨立的Gulp任務寫。

模板

 // tasks/mytask.js

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

獨立

 // tasks/myclean.js

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

貢獻，錯誤和功能請求

有錯誤或功能請求嗎？請首先閱讀問題指南，並蒐索現有和封閉的問題。如果您的問題或想法尚未解決，請打開一個新問題。