流程記錄

步驟：
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中設(shè)置：

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()生成的文件版本號映射關(guān)系，來替換html文件中的css和js引用位置。
npm install --save-dev gulp-rev-replace
注意：在src的index.html中css和js的原先引用位置，要寫上以下兩句的注釋行，讓rev-replace插件識別：

Paste_Image.png

Paste_Image.png

（9）用于解析html資源位置的
npm install --save-dev gulp-useref
注意：設(shè)置desk位置為dist文件夾下，配合（8）的插件一起使用，識別替換css文件和js文件后，dist中的index.html的css和js引用替換結(jié)果：

Paste_Image.png

注意：（7）（8）（9）是同步一起使用的，具體為：
在gulpfile.js中設(shè)置：

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í)行插件工具的設(shè)置。

Paste_Image.png

或者也可以，寫一個綜合的task，多個task組合成數(shù)組，然后一次執(zhí)行：

gulp.task('default',['build:img','build:css','build:js'])

Paste_Image.png

注意版本號的作用，當(dāng)發(fā)布線上之后，開發(fā)環(huán)境還需要做改動時，隨著修改樣式或js等文件的監(jiān)聽，會重新執(zhí)行一次合并壓縮，指定再執(zhí)行生成一次新的版本號，這樣，用戶查看頁面時，引用的css和js文件名就不會出現(xiàn)可能去走緩存的情況，或者因為名稱修改了，依賴暫時沒有刷新同步過來，而頁面暫時出錯的情況