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({//支持IE8ie8: 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({//支持IE8ie8: 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/autoprefixerbrowsers: ['> 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/autoprefixerbrowsers: ['> 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({//支持IE8ie8: 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）所有的文件命名不能出現中文字符。?

總結

以上是生活随笔為你收集整理的gulp 常用插件汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。