? 同事需要處理很多的圖片，由于UI那邊提供圖片比較大，為了性能好一點，程序包小一點，因此希望我幫忙做成小程序來完成此工作。

? 其實之前做過一個grunt寫的圖片壓縮合并工具，當時是為了處理270多個國家/地區的國旗/logo，這次打算用gulp寫一個，很久沒碰過了，分了一下，大概兩件事需要我去做：

? ?1.圖片壓縮

? ?2.圖片雪碧圖生成

? 然后在很容易就百度到了gulp-imagemin插件，這個做壓縮很容易，壓縮比什么的就不細看了，當我尋找合并工具的時候，百度真的很傻，搜索到的全部是gulp-css-spriter，而這個工具是用于對css中包含的圖片進行處理的，對于這個需求并不是很符合。好吧，我google下，很快找到答案了，gulp.spritesmith這個插件剛好滿足需求。

? 代碼如下：

??

1 var gulp=require('gulp'), 2 spriter=require('gulp-css-spriter'), 3 imagemin = require('gulp-imagemin'), 4 spritesmith = require('gulp.spritesmith'); 5 6 7 gulp.task('imagesmin', function(){ 8 9 return gulp.src("img/*") 10 .pipe(imagemin()) 11 .pipe(gulp.dest("temp")) 12 .pipe(spriter({ 13 'spriteSheet': './dist/spritesheet.png', 14 'pathToSpriteSheetFromCSS': '../images/spritesheet.png' 15 })) 16 .pipe(gulp.dest('dist/css')) 17 }) 18 //gulp.task('spriter', function() { 19 // return gulp.src('./src/css/styles.css') 20 // .pipe(spriter({ 21 // 'spriteSheet': './dist/spritesheet.png', 22 // 'pathToSpriteSheetFromCSS': '../images/spritesheet.png' 23 // })) 24 // .pipe(gulp.dest('dist/css')); 25 //}); 26 gulp.task('sprite', function () { 27 var spriteData = gulp.src('temp/*').pipe(spritesmith({ 28 imgName: 'sprite.png', 29 cssName: 'sprite.css', 30 padding: 20 31 })); 32 return spriteData.pipe(gulp.dest('dist')); 33 }); 34 gulp.task('default', ["sprite"]);

? 然后，就是安裝插件了，這個不想重復什么，npm ?install就可以了，沒什么技術含量，唯一值得一提的是，運行的時候遇到一個gulp安裝好了，結果報錯沒有命令gulp，網上查了下，需要修改環境變量，我就把環境變量了下就可以運行了。

? 另外，gulp.spritesmith很強大，支持生成的css文件模板，可以設置圖標的排列方式，間距，總之，很齊全的一個工具，附上npm地址：

? ?https://www.npmjs.com/package/gulp.spritesmith?

? 英文文檔還是不錯的，學習了，記錄一下。

轉載于:https://www.cnblogs.com/onedayof2010/p/5127126.html

總結

以上是生活随笔為你收集整理的Gulp 之图片压缩合并的全部內容，希望文章能夠幫你解決所遇到的問題。

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