Gulp 之圖片壓縮合並

  同事須要處理不少的圖片，因爲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 

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