gulp是什么？
gulp是基于流的自动化构建工具，与requirejs的不同是：
requirejs是在使用的时候，方便各个模块的调用，而gulp是一个后期处理工具，
把压缩，检测，合并等功能集中在一起，像一条流水线一样实现自动化。
======================我是分割线(￣▽￣)~*========================
使用说明：
- 1、在npm下安装gulp
- 2、安装需要的gulp插件。（常用插件如下）
var imagemin = require('gulp-imagemin'); //图片压缩
var cssnano = require('gulp-cssnano');//css压缩
var uglify = require('gulp-uglify'); // js压缩
var jshint = require('gulp-jshint');//js代码规范性检测
var concat = require('gulp-concat');//文件合并
var useref = require('gulp-useref');//concatenate file（合并文件但不压缩）
var rev = require('gulp-rev');//添加版本号
var revReplace = require('gulp-rev-replace');//替换版本号
var clean = require('gulp-clean');//清除内容
- 3、在gulp所在目录下创建gulpfile.js文件，并进行配置需要的功能。
比如我们常用的需要把某个项目的图片压缩，然后把css、js压缩，合并，添加版本号。
具体流程如下：
======================我是分割线(￣▽￣)~*========================
###代码（对了，图片压缩很简单，就不演示了）
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin'); //html压缩
var imagemin = require('gulp-imagemin'); //图片压缩
var cssnano = require('gulp-cssnano');//css压缩
var uglify = require('gulp-uglify'); // js压缩
var jshint = require('gulp-jshint');//js代码规范性检测
var concat = require('gulp-concat');//文件合并
var useref = require('gulp-useref');//concatenate file（合并文件但不压缩）
var rev = require('gulp-rev');//添加版本号
var revReplace = require('gulp-rev-replace');//替换版本号
var clean = require('gulp-clean');//清除内容
gulp.task("dist:css",function(){
return gulp.src('./requireJS/src/css/*.css')
.pipe(cssnano())
.pipe(concat('merge.css'))//必须改名字，否则会报错
.pipe(gulp.dest('dist/css/'))
})
gulp.task("dist:js",function(){
return gulp.src('./requireJS/dist/js/*.js')//因为这个项目经由r.js打包过，所有js都放在这个位置
.pipe(jshint())
.pipe(uglify())
.pipe(concat('merge.js'))//必须改名字，否则会报错
.pipe(gulp.dest('dist/js/'))
})
gulp.task("revision",['dist:css','dist:js'],function(){
return gulp.src(['dist/css/.css','dist/js/.js'])
.pipe(rev())//添加版本号但不输出
.pipe(rev.manifest())
.pipe(gulp.dest('dist'))
})
gulp.task("dist:html",['revision'],function(){
var manifest = gulp.src("./dist/rev-manifest.json")
return gulp.src('requireJS/index.html')
.pipe(revReplace({
manifest:manifest//把a.css换成a-xxx.css（注意：如果不改名，源文档的所有a.css会加版本号，导致报错)
}))
.pipe(useref())//会用build:css或者build:js后的文件名替换掉当前文件名（原HTML中的css或者js）
.pipe(gulp.dest('dist'));
})
gulp.task("clean",function(){
return gulp.src(['dist/css/.css','dist/js/.js','dist/index.html','dist/.css','dist/.js'])
.pipe(clean());
})
===================我是分割线(￣▽￣)~*================
###实际效果
1、原来的目录，空无一物
2、执行gulp dist:html，把整个自动化流程走起来
=============我是分割线(￣▽￣)~*===============
##注意1：
对于合并代码（gulp-useref）,需要先对html进行设置，具体如下图。
##注意2：
如果html引用了字体图标，建议直接拷贝字体图标文字，因为里面包含了一些字体文件，而不是纯粹css文件。