构建工具gulp

　　gulp基于nodejs流进行构建工作，相对于grunt更加简洁、方便；最主要的是不需要像grunt那样写一堆繁杂的配置参数！！！

安装与卸载

　　在安装方式和grunt相似，首先要全局安装gulp-cli，然后在项目中局部安装gulp

1 //首先全局安装gulp-cli
2 sudo npm install gulp-cli -g
3 
4 //在项目根目录下局部安装gulp
5 sudo npm install gulp --save-dev

　　注意：

　　　　关于--save-dev 和 --save 作用以及区别参考http://www.cnblogs.com/RocketV2/p/5406144.html

　　卸载npm安装的模块方法都相同

//卸载全局
sudo npm uninstall gulp-cli -g
//卸载局部
sudo npm uninstall gulp

gulp的使用

　　1.首先在项目根目录下创建gulpfile.js文件

　　2.在gulpfile.js进行构建工作，下面是官网模板

var gulp = require('gulp');
var pug = require('gulp-pug');
var minifyCSS = require('gulp-csso');

gulp.task('css', function(){
  return gulp.src('client/templates/*.less')//读取操作的文件
    .pipe(less()) //使用插件编译less文件
    .pipe(minifyCSS()) //使用插件压缩css文件
    .pipe(gulp.dest('build/css')) //将文件写到指定目录
});

gulp.task('default', [ 'css' ]);

　　3.执行gulp命令

//执行默认
gulp
//执行指定命令
gulp css

gulp核心API

　　常用的方法为：task(), src(), dest(), watch()

常用的插件

　　1. js代码检查　　gulp-jshint

sudo npm install jshint gulp-jshint --save-dev // 必须同时安装jshint gulp-jshint

　　2.js代码压缩 gulp-uglify

sudo npm install gulp-uglify --save-dev

　　3.css代码压缩 gulp-clean-css(gulp-minify-css已弃用)

sudo npm install gulp-clean-css --save-dev

　　4.html代码压缩 gulp-minify-html

sudo npm install gulp-minify-html --save-dev

　　5.合并文件 gulp-concat 可以对js/css文件合并

sudo npm install gulp-concat --save-dev

var gulp = require("gulp");
var concat = require("gulp-concat");
gulp.task("concat",function(){
    return gulp.src(["src/js/a.js","src/js/b.js","src/js/c.js"])
               .pipe( concat("abc.js") ) //指定合并后的文件名
　　　　　.pipe( gulp.dest("dest/js") )
});

　　6.使用babel插件 gulp-babel

　　注意：一定要安装转码规则 babel-preset-es2015

sudo npm install gulp-babel babel-preset-es2015 --save-dev

var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("babel",function(){
    return gulp.src("src/js/*.js")
               .pipe( babel({presets:["es2015"]}) )
               .pipe( gulp.dest("dest/js/") );
});

　　7.使用gulp-sourcemaps

　　　使用构建工具压缩、编译文件得到转换文件，在浏览器运行时，如果转换文件报错，该如何定位？

　　 source maps 一个存储位置信息的文件；除错工具根据存储的信息能够将转换后的文件显示为原始文件；

　　　chrome下的除错工具：开发者工具-->setting-->sources

var sourcemaps = require("gulp-sourcemaps");
var uglify     = require("gulp-uglify");
gulp.task("uglify",function(){
    return gulp.src("src/js/*.js")
               .pipe( sourcemaps.init() ) //首先使用init()函数
               .pipe( uglify() ) //中间是压缩函数执行
               .pipe( sourcemaps.write() ) //最后执行write()函数
               .pipe( gulp.dest("dest/js/") );
});

　　这样就会生成一个map文件，浏览器除错工具能够识别；

gulp有许多高质量插件,各种插件具体如何使用,可以参考npmjs.org上的文档

参考：(优质的文档能够准确，快速地理解掌握知识点；感谢以下文档)

[1] gulp官网

[2] javascript source map 详解

[3] gulp使用介绍