2017-07-26更新：圖片壓縮外掛使用gulp-smushit，gulp-smushit壓縮率比較大，gulp-imagemin 圖片壓縮外掛壓縮率不明顯。

 見下圖壓縮率：

1、gulp安裝

參照gulp官網進行安裝：http://www.gulpjs.com.cn/docs/getting-started/

2、常用的外掛

gulp所有外掛地址：http://gulpjs.com/plugins/

（1）html壓縮外掛

外掛地址：https://www.npmjs.com/package/gulp-htmlmin/

（2）sass編譯外掛

外掛地址：https://www.npmjs.com/package/gulp-sass/

注意現在是執行2個任務了，同時注意配置好路徑。

（3） 圖片壓縮外掛

gulp-imagemin外掛地址：https://www.npmjs.com/package/gulp-imagemin/

gulp-smushit外掛地址：https://www.npmjs.com/package/gulp-smushit/

（4）css壓縮外掛

外掛地址：https://www.npmjs.com/package/gulp-clean-css/

任務配置示例：

//css壓縮任務
gulp.task('cssmin', function() {
    //過濾掉.min.css檔案
    gulp.src(['./css/*.css', '!./css/*.min.css'])
        .pipe(cleanCSS({
            
 
//'ie8'：IE8+相容模式，
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./dist/css'));
});

 （5）JS壓縮外掛gulp-uglify

外掛地址：https://www.npmjs.com/package/gulp-uglify/

任務配置示例：

//JS壓縮任務
gulp.task('jsmin', function() {
    //過濾掉.min.js檔案
    gulp.src(['./js/*.js','!./js/*.min.js'])
        .pipe(uglify({
            
 
//支援IE8
            ie8: true
        }))
        .pipe(gulp.dest('./dist/js'));
});

（6）雪碧圖外掛gulp-css-spriter

外掛地址：https://www.npmjs.com/package/gulp-css-spriter/

在css中只需要這樣寫即可：

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px,100px);
}
.a{
    width: 71px;
    height: 93px;
    background: url(../img/sqbg-icon.png) no-repeat center;
}
.b{
    width: 960px;
    height: 417px;
    background: url(../img/ceshi3.png) no-repeat center;
}

生成後的CSS為：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px,100px);
}

.a {
    width: 71px;
    height: 93px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -417px;
}

.b {
    width: 960px;
    height: 417px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -0px;
}

自動將圖片路徑更換為雪碧圖的spritesheet.png的路徑，同時自動新增上了background-position。

另外：若不想頁面中所有的png都合併為雪碧圖，可以將只想合併的圖片後新增?__spriter

示例程式碼：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px, 100px);
}

.a {
    width: 71px;
    height: 93px;
    background: url(../img/sqbg-icon.png?__spriter) no-repeat center;
}

.b {
    width: 960px;
    height: 417px;
    background: url(../img/ceshi3.png) no-repeat center;
}

.c {
    width: 960px;
    height: 417px;
    background: url(../img/product4.png?__spriter) no-repeat center;
}

生成後的css程式碼為：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px, 100px);
}

.a {
    width: 71px;
    height: 93px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -417px;
}

.b {
    width: 960px;
    height: 417px;
    background: url(../img/ceshi3.png) no-repeat center;
}

.c {
    width: 960px;
    height: 417px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -0px;
}

實現以上情景需要做的是修改\node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js 這個檔案的40行開始的if--else if程式碼塊為：

// background-image always has a url 且判斷url是否有?__spriter字尾

        if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) {

            transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter', '');
            return cb(transformedDeclaration, declarationIndex, declarations);
        }
        // Background is a shorthand property so make sure `url()` is in there 且判斷url是否有?__spriter字尾
        else if(transformedDeclaration.property === 'background' && /\?__spriter/i.test(transformedDeclaration.value)) {

            transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter', '');
            var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);

            if(hasImageValue) {
                return cb(transformedDeclaration, declarationIndex, declarations);
            }
        }

如下截圖：

（7）JS程式碼檢查外掛gulp-jshint

外掛地址：https://www.npmjs.com/package/gulp-jshint/

同時安裝jshint-stylish外掛，外掛地址：https://www.npmjs.com/package/tslint-stylish/

錯誤和警告輸出為一下形式：

 （8）重新命名外掛gulp-rename

外掛地址：https://www.npmjs.com/package/gulp-rename/

 配置檔案示例：

gulp.task('jsmin', function() {
    //過濾掉.min.js檔案
    gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(uglify({
            //支援IE8
            ie8: true
        }))
        //修改副檔名
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/js'));
});

 （8）資源、模組複用外掛gulp-file-include

外掛地址：https://www.npmjs.com/package/gulp-file-include

（9）自動新增字首gulp-autoprefixer

外掛地址：https://www.npmjs.com/package/gulp-autoprefixer

以上外掛組合後的整體配置檔案（包含命令的順序執行），在命令列中直接輸入gulp執行即可： 

var gulp = require('gulp');
//HTML壓縮外掛
var htmlmin = require('gulp-htmlmin');
//SASS編譯外掛
var sass = require('gulp-sass');
//圖片壓縮外掛
var imagemin = require('gulp-imagemin');
//PNG壓縮外掛
var imageminPngquant = require('imagemin-pngquant');
//CSS壓縮外掛
var cleanCSS = require('gulp-clean-css');
//雪碧圖合併外掛
var spriter = require('gulp-css-spriter');
//js壓縮外掛
var uglify = require('gulp-uglify');
//新增字首外掛
var autoprefixer = require('gulp-autoprefixer');
//圖片壓縮外掛
var smushit = require('gulp-smushit');
//js校驗外掛
var jshint = require('gulp-jshint');
//重新命名外掛
var rename = require("gulp-rename");
//圖片壓縮中減少重複壓縮
var cache = require('gulp-cache');
//模板複用
var fileinclude = require('gulp-file-include');

//html壓縮任務
gulp.task('html', function() {
    return gulp.src('./*.html')
        //資源複用外掛
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        //html壓縮外掛
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist'))
});

//sass編譯任務--包括scss編譯、雪碧圖合併、新增字首、壓縮和重新命名任務
gulp.task('sass', function() {
    return gulp.src('./css/*.scss')
        .pipe(sass().on('error', sass.logError))
        //雪碧圖合併
        .pipe(spriter({
            //這是雪碧合成的圖
            'spriteSheet': './dist/img/scssSpriteSheet.png',
            //css引用的圖片路徑
            'pathToSpriteSheetFromCSS': '../img/scssSpriteSheet.png'
        }))
        //新增字首
        .pipe(autoprefixer({
            //瀏覽器市場佔有率參考：https://mtj.baidu.com/data/mobile/device 以及http://tongji.baidu.com/data/browser
            //配置參考：https://github.com/postcss/autoprefixer
            browsers: ['> 1%', 'ie >= 8', 'Android >= 4.1', 'iOS >= 7.0'],
            //是否美化屬性值 預設：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: false
        }))
        //css壓縮
        .pipe(cleanCSS({
            //'ie8'：IE8+相容模式，
            compatibility: 'ie8'
        }))
        //修改副檔名
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'));
});

//監控檔案任務
gulp.task('watch', function() {
    //監控 scss 檔案，如果有修改，則執行 sass 任務
    gulp.watch('./css/*.scss', ['sass']);
    //監控 js 檔案，如果有修改，則執行 scripts 任務
    gulp.watch('./js/*.js', ['scripts']);
    //監控 css 檔案，如果有修改，則執行 css 任務
    gulp.watch('./css/*.css', ['css']);
    //監控 圖片 檔案，如果有修改，則執行 imagemin 任務
    gulp.watch('./img/*.{jpg,png}', ['imagemin']);
    //監控 圖片 檔案，如果有修改，則執行 imagemin 任務
    gulp.watch('./*.html', ['html']);

});

//圖片壓縮任務--使用gulp-imagemin外掛
//gulp.task('imagemin', function() {
//    gulp.src('./img/*')
//        .pipe(imagemin({
//            progressive: true,
//            svgoPlugins: [{
//                removeViewBox: false
//            }], //不要移除svg的viewbox屬性
//            use: [imageminPngquant()] //使用pngquant深度壓縮png圖片的imagemin外掛
//        }))
//        .pipe(gulp.dest('dist/img'))
//});

//更改壓縮外掛使用gulp-smushit
gulp.task('imagemin', function() {
    return gulp.src('./img/*.{jpg,png}')
        .pipe(cache(smushit({
            //顯示壓縮率
            verbose: true
        })))
        .pipe(gulp.dest('dist/img'));
});

//css任務--雪碧圖合併、新增字首、壓縮、重新命名
gulp.task('css', function() {
    //過濾掉.min.css檔案
    return gulp.src(['./css/*.css', '!./css/*.min.css'])
        //雪碧圖合併
        .pipe(spriter({
            //這是雪碧合成的圖
            'spriteSheet': './dist/img/spritesheet.png',
            //css引用的圖片路徑
            'pathToSpriteSheetFromCSS': '../img/spritesheet.png'
        }))
        //新增字首
        .pipe(autoprefixer({
            //瀏覽器市場佔有率參考：https://mtj.baidu.com/data/mobile/device 以及http://tongji.baidu.com/data/browser
            //配置參考：https://github.com/postcss/autoprefixer
            browsers: ['> 1%', 'ie >= 8', 'Android >= 4.1', 'iOS >= 7.0'],
            //是否美化屬性值 預設：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: false
        }))
        //css壓縮
        .pipe(cleanCSS({
            //'ie8'：IE8+相容模式，
            compatibility: 'ie8'
        }))
        //修改副檔名
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'));
});

//scripts任務--包含壓縮和重新命名
gulp.task('scripts', function() {
    //過濾掉.min.js檔案
    return gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(uglify({
            //支援IE8
            ie8: true
        }))
        //修改副檔名
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/js'));
});

//js校驗任務--jshint
gulp.task('lint', function() {
    return gulp.src('./js/*.js')
        .pipe(jshint())
        //使用了tslint-stylish外掛
        .pipe(jshint.reporter("jshint-stylish"));
});

//序列方式執行任務:做好依賴
gulp.task('default', ['sass', 'css', 'scripts', 'imagemin', 'html', 'watch']);

 說明：

（1）gulp的排除模式：

// 使用陣列的方式來匹配多種檔案
gulp.src(['*.js','!b*.js']) // 匹配所有js檔案，但排除掉以b開頭的js檔案
gulp.src(['!b*.js',*.js]) // 不會排除任何檔案，因為排除模式不能出現在陣列的第一個元素中

（2）gulp 對於 one after one 的任務鏈，需要加 return

注意：

（1）配置好檔案路徑。

（2）安裝相關外掛 npm i 外掛名 --save-dev。

以上外掛的安裝命令為：

npm install --save-dev gulp
npm install gulp-htmlmin --save-dev
npm install gulp-sass --save-dev
npm install gulp-clean-css --save-dev
npm install gulp-css-spriter --save-dev
npm install gulp-uglify --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-smushit --save-dev
npm install gulp-jshint --save-dev
npm install gulp-rename --save-dev
npm install gulp-cache --save-dev
npm install gulp-file-include --save-dev

（3）所有的檔案命名不能出現中文字元。