本文github地址
简介：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
一、简要
步骤：全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
二、具体操作
1. 全局安装gulp
npm install gulp -g
2. 新建package.json文件
说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。方便自己也方便他人，这个工作中慢慢体会。
有两种方法：其一利用webstrom编辑器新建一个package.json文件；其二在当前目录下输入npm init 初始化，然后一路开车。
如下图：
3. 本地安装gulp插件
npm install --save-dev xxx //注意此处的xxx是你要用到的插件名称。
ps：熟练的话可以连着写。
注意：安装完成之后会有两个变化，一个是在当前目录下多了一个node_modules文件夹，文件package.json下多两行字
4. 新建gulpfile.js文件（重要）
说明：gulpfile.js是gulp项目的配置文件，用于编写任务的，也就是让gulp做什么怎么做！
大概分三步：
- 引入所需模块（必须已经用npm安装过）
- 编写任务
- 执行任务
例1：看一个将项目文件（css、html、js、图片）压缩过程。
注意：这里的js文件因为使用了es6的语法，所以必须将其转为es5语法在进行压缩
//引入模块
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var cssmin=require('gulp-cssmin');
var imagemin=require('gulp-imagemin');
var concat=require('gulp-concat');
var babel = require('gulp-babel');//识别es6语法转为es5
var es2015Preset = require('babel-preset-es2015');
//编写任务
/* -------------------- 压缩css文件 -------------------- */
gulp.task('compress:css',function(){
gulp.src('src/demo/css/*.css')//配置要压缩的文件源路径
.pipe(cssmin()) //该任务调用的模块
.pipe(gulp.dest('build/demo_compress/css')) //生成文件保存的路径
});
/* -------------------- 压缩js文件（首先将es6语法转化为es5语法） -------------------- */
gulp.task('es6to5', function() {
return gulp.src('src/demo/js/*.js') //配置要压缩的文件源路径
.pipe(babel({presets: [es2015Preset]}))
.pipe(gulp.dest('./res/js/'));
});
gulp.task('compress:js', ['es6to5'], function() {
return gulp.src('./res/js/app.js')
.pipe(uglify({
mangle: false,//类型：Boolean 默认：true 是否修改变量名
compress: true,//类型：Boolean 默认：true 是否完全压缩
}))
.pipe(gulp.dest('build/demo_compress/js'));
});
/* -------------------- 压缩img文件（可能会失真） -------------------- */
gulp.task('compress:img',function(){
gulp.src('src/demo/image/*.gif')
.pipe(imagemin())
.pipe(gulp.dest('build/demo_compress/image'))
});
/* -------------------- 压缩html文件 -------------------- */
gulp.task('compress:html',function(){
gulp.src('src/demo/*.html')
.pipe(htmlmin({
removeComments: true, //删除注释
collapseWhitespace: true //删除空格
}))
.pipe(gulp.dest('build/demo_compress/'))
});
//监听模块 ---（就是监听某一个文件发生改变的时候知道自动执行相应的压缩任务）
//gulp.watch('src/demo/*.html',['compress:html']);
//注册默认任务 --- （在当前目录下执行“gulp”指令即可）
gulp.task('default',['compress:css','compress:js','compress:img','compress:html']);
5. 运行gulp
//输入命令 gulp
gulp
6. 补充
一般工作过过程中我们拿到的文件，一般就是分两步：
npm install- gulp
