gulp的使用

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压缩，合并，添加版本号。
具体流程如下：

![image.png](https://img.haomeiwen.com/i593513/e2c86367313792f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
======================我是分割线(￣▽￣)~*========================
###代码（对了，图片压缩很简单，就不演示了）

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、原来的目录，空无一物
![image.png](https://img.haomeiwen.com/i593513/57d3ada9c12cf8e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、执行gulp dist:html，把整个自动化流程走起来

![image.png](https://img.haomeiwen.com/i593513/2226ab05cdbb6615.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![image.png](https://img.haomeiwen.com/i593513/f1fa9776dc7bd072.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



![image.png](https://img.haomeiwen.com/i593513/67f5144eb47f956b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



=============我是分割线(￣▽￣)~*===============

##注意1：
对于合并代码（gulp-useref）,需要先对html进行设置，具体如下图。

![image.png](https://img.haomeiwen.com/i593513/d55220cda6280b72.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![image.png](https://img.haomeiwen.com/i593513/3486baf8d22a187b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##注意2：
如果html引用了字体图标，建议直接拷贝字体图标文字，因为里面包含了一些字体文件，而不是纯粹css文件。