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

贡献，错误和功能请求

有错误或功能请求吗？请首先阅读问题指南，并搜索现有和封闭的问题。如果您的问题或想法尚未解决，请打开一个新问题。