前提：前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。本文将详细介绍其中一种常用的前端自动化工具—gulp.js

– 入门：

安装方式：

  全局安装： npm install --g gulp
  局部（项目安装）： npm install --save-dev gulp

gulp配置文件：

在项目根目录下创建一个gulpfile.js文件，其中default任务为主任务，其他为功能任务；
语法：

var gulp = require('gulp');
gulp.task('default',function(){...});

运行方式：

在命令行中直接输入gulp运行，或者在webstorm中在对应的gulpfile.js点中，然后右键，选择show gulp task方式就能运行；

– gulp的API：

一）gulp.src方法：

定义：该方法会匹配对应的文件，并以虚拟文件流（包含路径，文件名，内容）的形式返回；

语法：gulp.src(globs [,option])

特点：因为返回的文件流是类似于Readable Streams的形式，所以可以利用pipe管道的方式传输，处理文件流。

参数介绍：

a）globs：可以理解成一种类似于正则表达式的匹配模式，其值可以为匹配形式，文件路径，或者文件路径数组。
*：匹配任何字符串但不识别路径分隔符（‘/’）

eg： gulp.src('./build/*.js')   匹配build文件中所有js文件

**：匹配任何字符串包括‘/’

eg：gulp.src('**.js')  匹配任何路径下的js文件

[…] ： 枚举

eg:  gulp.src('[abc].js')     匹配a.js或者b.js或者c.js

[!…] : 枚举中括号中以外的一切字符串

eg：gulp.src('[!abc].js')    匹配d.js等等js文件

? : 职匹配一个字符串

eg：gulp.src('?.js')   匹配a.js等等js文件

b）option：里面有buffer，read，base配置项，其中base项是关于文件流保存的路径相关（具体放在dest方式中阐述）

二）gulp.dest方法：

定义：将文件流写入到指定的路径文件中，并继续输出该文件流；
语法：gulp.dest(path [,option])
注意事项：
a)文件流写入的文件名只能由流入的文件流定义；
b）path是路径，不能是文件名；
c）src中base项默认是匹配符之前的字符串路径，但也可以人为设置，例子阐述：

gulp.src('a/b/*/[ab].js')
    .pipe(gulp.dest('./build'))

解释：默认base为a/b，塞进文件流的文件名为*/[ab].js，所以新建的文件的路径为./build/*/[ab].js

gulp.src('a/b/*/c/d.js',{base:'a'})
    .pipe(gulp.dest('./build'))

解释：base现是a，塞进文件流的文件名为b/*/c/d.js,所以新建的文件路径为./build/b/*/c/d.js

d）dest方法输出的文件流也可以被pipe传输；

三）gulp.task方法：

定义： 在gulp中定义一个任务，其中主任务为default；
语法： gulp.task(name [,deps] ,fn)
参数：

  name是任务名；
  deps是依赖的任务数组，是在当前任务之前执行的；
  fn：当前任务内容；

情景：
a) gulp.task(‘default’,function(){…})：最简单模式；
b）gulp.task(‘default’,[‘A1′,’A2’]):default是由A1,A2两个任务组成的；
c）gulp.task(‘default’, [‘A1′,’A2’],function(){…}):先执行完A1,A2，再执行default任务；

question： 若任务列表A1,A2中，A1存在异步操作，则执行A2时，A1还很可能未执行完；
resolve：
A) fn任务函数可以引进一个回调函数参数，该参数可以告诉外界该任务是否执行完；

eg：   gulp.task('A1',function(cb){
           setTime(function(){
           console.log(1);
           cb();
           },2000);
        })
        gulp.task('A2',function(){console.log(2);})
        gulp.task('default',['A1','A2'],function(){
             console.log(3)
        })
        输出结果为：2 1 3

B）任务函数返回一个流对象，适用于gulp.src方法；

gulp.task('A',function(){
             return gulp.src('./a.js')
                        .pipe(插件)
          })
gulp.task('deafult',['A'],function(){...})

C)返回一个Promise对象；

gulp.task('A',function(){
            return new Promise( (res,rej) => {
            })
          })
gulp.task('default',['A']);

四）gulp.watch方法：

定义：该方法是用来监听文件的变化；
语法一：gulp.watch(glob [,opts] , tasks)
语法二：gulp.watch(glob [,opts] , function(event){…})
event是一个事件对象；
event.type为added（添加类型）；changed（改变类型）；deleted（删除类型）
event.path:变化的文件路径；

– 常用gulp插件：

gulp有很多插件，而本文列举出一些常用的插件

• gulp-uglify插件

用途：用来压缩js文件
用法：

var uglify = require('gulp-uglify');
gulp.task('uglifyJS',function(cb){
    gulp.src('./demo/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build'));
    cb();
});

• gulp-minify-css插件

用途：用来压缩css文件
用法：

var minifyCss = require('gulp-minify-css');
gulp.task('minifyCss',function(cb){
    gulp.src('./demo/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('./build'));
    cb();
});

• gulp-minify-html插件

用途：合并html文件
用法：

var miniHtml = require('gulp-minify-html');
gulp.task('miniHtml',function(cb){
    gulp.src('./src/*.html')
        .pipe(miniHtml())
        .pipe(gulp.dest('./build'));
});

• gulp-connect插件

用途：自动刷新页面
用法：

var connect = require('gulp-connect');
gulp.task('connect',function(){
    connect.server({
        root:'src',
        livereload:true,
    })
});
gulp.task('watchHtml',function(){
    gulp.watch('./src/*.html',function(){
        gulp.src('./src/*.html')
            .pipe(connect.reload());
    })
});

• gulp-jshint插件

用途：用来检查js语法
用法：

var jshint = require('gulp-jshint');
gulp.task('checkJs',()=>{
    gulp.src('./src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter())
});

• gulp-concat插件

用途：合并多个js或者css文件
用法：

var concat = require('gulp-concat');
gulp.task('concat',()=>{
    gulp.src('./*/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./build'));
});

• gulp-rename:

定义;将文件改名；
语法：
a）rename（filename）:将文件直接改为指定文件名；
b）rename（{dirname：’A’ ,basename：’B’ ,prefix：’C-‘,suffix：’-D’, extname：’.txt’}）:将文件名改为A/C-B-D.txt；
C）rename（function（path）{}）:path为一个对象，包含B）中所有属性；

var rename =require('gulp-rename');   
gulp.task('rename',()=>{              
    gulp.src('./demo/*.css')          
        .pipe(rename({                
            suffix:'.min',            
            extname:'.less'           
        }))                           
        .pipe(gulp.dest('./build'));  
})                                    

参考文档：
gulp文档