前端自动化构建可以帮我们做：合并html，清除、合并、压缩css，拷贝图片，监控文件变化，运行web服务器，打开浏览器，使用webpack打包编译js
构建工具可以解放我们双手，提高开发效率
gulp是基于流的，使用的基本套路就是： 引入插件->注册任务->输入数据->任务处理->数据输出
基于流怎么理解？
grunt是操作生成一个临时文件；
gulp类似一个管道，文件读进来，执行相应的操作，然后生成最终的文件即可
gulp的基本概念：
gulp的基础api（4个）
gulp.task：任务
gulp.src：目标文件
gulp.dest：输出的文件目录
gulp.watch：监测文件变化
接下来就是以项目实战的方式说下gulp的一些简单用法
1、全局安装 gulp
npm install -g gulp
2、使用npm初始化项目
npm init
3、安装项目依赖
$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
......
文件太多，就省略其他插件了，根据项目需要，进入相应的插件依赖（--save-dev命令是为了和项目关联，安装完成后可以在 package.json 文件中查看已安装的插件依赖；另外如果我们在github上下载了一个项目，打开package.json文件，看到依赖了n多个插件，如果要像上面npm install xxx 一个一个安装那就太痛苦了，可以使用 npm i 命令，就可以下载安装所有的依赖插件了。）
4、在项目跟目录下 新建 gulpfile.js 文件。在此文件中，需要使用require把上面依赖的插件引入进文件中。
具体代码：
var gulp =require('gulp'),
sass =require('gulp-sass'),
concat =require('gulp-concat'),
minifycss =require('gulp-minify-css'),
uglify =require('gulp-uglify'),
rename =require('gulp-rename'),
autoprefixer =require('gulp-autoprefixer');
5、然后是使用gulp的几个api完成我们项目的构建工作。
一般构建功能有：文件压缩、文件合并、监控文件变化...，我们就以文件压为例，说下具体怎样用。
- 压缩css文件
gulp.task("mini_css", function(cb){
var cssSrc = ['./css/*.css'];
return gulp.src(cssSrc) //压缩的文件
.pipe(concat('all.css')) //合并所有css到all.css
.pipe(gulp.dest('./main/css')) //输出文件夹
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./main/css')); //执行压缩
})
- 压缩JS文件
gulp.task('minify_js',["clean"], function() {
var jsSrc = ['./lib/*.js','!./lib/*.src.js'];
return gulp.src(jsSrc)
.pipe(concat('all.js')) //合并所有js到all.js
.pipe(gulp.dest('./lib')) //输出all.js到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('./lib')); //输出
});
- 删除文件
gulp.task('clean', function() {
//执行压缩前，先删除以前压缩的文件
return del(['./css/all.css', './css/all.min.css','./lib/all.min.js'])
});
- 任务集
gulp.task("dev", ["mini_css", "mini_js"])
6、执行gulp命令
- 可以单独执行一条命令
gulp minify_js
- 可以执行一个任务的集合（这个适合项目定制任务集合，比如在开发的时候需要使用watch监测文件变化的功能，在上线环境就不需要这个功能了）
gulp dev // 这个dev对应上面 任务集 声明的变量
- 如果想省劲，可以使用 default 作为任务的名称
比如：
gulp.task("default ", ["mini_css", "mini_js"])
这时，在命令行就可以直接使用 gulp 命令，后面不需要在使用 任务名称了。
