流程記錄
步驟：
1、全局安裝gulp
npm install -g gulp
2糠聪、然后找一個指定文件位置，
touch gulpfile.js,創(chuàng)建這個文件
npm init -y,創(chuàng)建package.json文件
3、在這個指定文件位置中局部安裝gulp傲隶，這樣安裝依賴就都會記錄在package.json文件中。
npm install gulp -D
4胧瓜、在gulpfile.js中寫入需要用到的插件的聲明矢棚，引入插件：
下面列舉，此次例子中府喳，我需要用到的插件：
var gulp = require('gulp');
var cssnano =require('gulp-cssnano');
var concat =require('gulp-concat');
var imagemin=require('gulp-imagemin');
var autoprefixer=require('gulp-autoprefixer');
var clean= require('gulp-clean');
var uglify = require('gulp-uglify');
var rev =require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
5蒲肋、根據(jù)需要按順序依次安裝gulp的插件：使用到的有：
（1）用于清除內(nèi)容的：每次測試可以刪除原有的合并文件，重新生成
npm install --save-dev gulp-clean
（2）用于css壓縮的：
npm install gulp-cssnano --save-dev
（3）用于文件合并的：將多個同后綴的文件做合并
npm install gulp-concat --save-dev
（4）用于css后編譯钝满，自動生成添加hack兼容前綴的：
npm install --save-dev gulp-autoprefixer
具體使用：在gulpfile.js中設置：
gulp.task("build:css",function(){
gulp.src('./dist/css/*.css').pipe(clean());
return gulp.src('./src/css/*.css')
.pipe(concat('index-merge.css'))
.pipe(cssnano())
.pipe(autoprefixer({
browsers:['last 2 versions'],
cascade:false
}))
.pipe(gulp.dest('./dist/css'))
})
（5）用于圖片壓縮的：
npm install --save-dev gulp-useref
gulp.task("build:img",function(){
gulp.src('./dist/img/*').pipe(clean());
return gulp.src('./src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'))
})
（6）用于js文件壓縮合并的：
npm install --save-dev gulp-uglify
gulp.task('build:js',function(){
gulp.src('./dist/js/*.js').pipe(clean());
return gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(concat('merge.js'))
.pipe(gulp.dest('./dist/js'))
})
（7）用于生成文件版本號的（css或js）：
npm install --save-dev gulp-rev
（8）用于通過rev.manifest()生成的文件版本號映射關系兜粘，來替換html文件中的css和js引用位置。
npm install --save-dev gulp-rev-replace
注意：在src的index.html中css和js的原先引用位置弯蚜，要寫上以下兩句的注釋行孔轴，讓rev-replace插件識別：
（9）用于解析html資源位置的
npm install --save-dev gulp-useref
注意：設置desk位置為dist文件夾下，配合（8）的插件一起使用碎捺，識別替換css文件和js文件后距糖，dist中的index.html的css和js引用替換結果：
注意：（7）（8）（9）是同步一起使用的，具體為：
在gulpfile.js中設置：
gulp.task('revision',['build:css','build:js'],function(){
return gulp.src(['./dist/css/*.css','./dist/js/*.js'])
.pipe(rev())
.pipe(gulp.dest('./dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist'))
})
gulp.task('index',['revision'],function(){
var manifest = gulp.src('./dist/rev-manifest.json');
return gulp.src('./src/index.html')
.pipe(revReplace({
manifest:manifest
}))
.pipe(useref())
.pipe(gulp.dest('./dist'));
})
6牵寺、執(zhí)行悍引，生成效果：
直接在git bush中執(zhí)行task的名稱，就能執(zhí)行插件工具的設置帽氓。
或者也可以趣斤，寫一個綜合的task，多個task組合成數(shù)組黎休，然后一次執(zhí)行：
gulp.task('default',['build:img','build:css','build:js'])
注意版本號的作用浓领，當發(fā)布線上之后，開發(fā)環(huán)境還需要做改動時势腮，隨著修改樣式或js等文件的監(jiān)聽联贩，會重新執(zhí)行一次合并壓縮，指定再執(zhí)行生成一次新的版本號捎拯，這樣泪幌，用戶查看頁面時，引用的css和js文件名就不會出現(xiàn)可能去走緩存的情況署照，或者因為名稱修改了祸泪，依賴暫時沒有刷新同步過來，而頁面暫時出錯的情況
