gulp 自动化构建工具

一、gulp 和webpack 的区别
前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack。
grunt 和gulp 是一个优化前端流程的工具，而webpack是一个预编译模块的方案同时也是一个打包工具。具体关系如下图：

js的规范有两个 AMD 和CMD，在线编译模块方案分为requireJs 和seaJs，预编译模块方案分为：browserify 和webpack（也用于打包），自动化工具Gulp和Grunt。

二、gulp 的安装
需要node环境 ，node安装好后，再用npm指令安装。
安装指令：

npm install --global gulp

开发依赖安装

npm install --save-dev gulp

创建一个gulpfile.js文件

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

  //放入默认任务代码

});

运行gulp指令

gulp

三、gulp 任务配置
配置任务前，引入一些常用的模块。

var browserify = require('browserify'),
    gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    gutil = require('gulp-util'),
    less = require('gulp-less'), //less编译
    sourcemaps = require('gulp-sourcemaps'), //编译less时生成额外的.map文件,便于开发环境时用chrome来映射查找样式对应的less
    autoprefixer = require('gulp-autoprefixer'), //设置浏览器版本自动处理浏览器前缀
    minifyCSS = require('gulp-minify-css'), //压缩 CSS
    uglify = require('gulp-uglify'), //js压缩
    imagemin = require('gulp-imagemin'), //image压缩
    cache = require('gulp-cache'), //配合gulp-imagemin使用，只压缩修改的图片
    clean = require('gulp-clean'), //清理文件
    browserSync = require('browser-sync').create(), //刷新
    proxyMiddleware = require('http-proxy-middleware'), //反向代理
    concat = require('gulp-concat'),
    shell = require('gulp-shell'),
    babel=require('gulp-babel'),
    amdOptimize = require('amd-optimize');

处理less文件的任务配置：

gulp.task('less-dev' , function () {
    gulp.src('css/less/**.less')  //less源文件
        .pipe(sourcemaps.init()) //生成map文件，用于报错时映射到对应的代码行
        .pipe(less())//less 文件编译
        .pipe(sourcemaps.write('./', {includeContent: false}))
        .pipe(gulp.dest('css/')) //编译后的文件存放路径
});

gulp.task('less' , function () {
    gulp.src(['src/css/**.css'])
        .pipe(minifyCSS())  //压缩编译后的css
        .pipe(gulp.dest('dist/css/')) //存放到生产环境目录下
});

js 文件的处理：

gulp.task('js' , function () {   
      gulp.src('src/js/**.js')  //指定源路径下的所有js文件
      .pipe(concat("index.js")) //合并所有的js文件
      .pipe(babel({
        presets: ['es2015']   //使用支持es6语法的模块
      }))  

      .pipe(uglify().on('error', function(err){
        gutil.log(err);
        this.emit('end');
    }))//压缩js源码
      .pipe(gulp.dest('./dist/js'));存放到生产环境
});

图片处理任务：

gulp.task('images', function() {
    gulp.src('src/images/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        })))
        .pipe(gulp.dest('dist/images'));
});

html 文件处理：

gulp.task('html', function() {
    gulp.src(['src/*.ico', 'src/**/**.html', 'src/json/*.json'])
        .pipe(gulp.dest('dist/'));
});

第三方库文件处理：

gulp.task('vendor', function() {
    gulp.src(['src/vendor/**'],{base:'./src'})
        .pipe(gulp.dest('dist/'));
})

clean 任务：

gulp.task('clean', function() {
    gulp.src(['dist'], {
        read: false
    })
        .pipe(clean());
});

合并任务流的指令：

gulp.task('watch' , function() {
    gulp.start('html', 'less', 'js', 'images', 'vendor');
});

在指令窗口敲gulp watch,就会依次 html less js images vendor 的相关任务。

服务器代理额配置和热更新：

gulp.task('watch-dev', function() {
    gulp.watch('src/css/less/**.less', ['less-dev']);
    gulp.watch('src/**/**.js', ['js']);
    gulp.watch('src/**/**.html', ['html']);
    var middleware = [
        proxyMiddleware(['/api'], {target: "http://x.x.x.x:8080", changeOrigin: true, pathRewrite: {
            '^/api' : '/'      // rewrite paths
        }}),

    ];
    var files = [
        'src/**.html',
        'src/css/**.css',
        'src/images/*.{png,jpg,gif,ico}',
        'src/**/**.js'
    ];
    browserSync.init({
        server: {
            baseDir: './dist',
            port: 3000,
            middleware: middleware
        },
        rewriteRules: [
        {
            match: /dynamic-text-news.html/g,
            fn: function (match) {
                gutil.log("browserSync rewrite for " + match);
                return 'kittenz';
            }
        }],
        startPath: './index.html'
    });
    var reload = browserSync.reload;
    gulp.watch(files, reload);
});

参考：
1.https://www.zhihu.com/question/37020798
2.http://www.gulpjs.com.cn/docs/getting-started/