gulp-css-spriter 將css代碼中的切片圖片合並成雪碧圖

 

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

 

 配置gulpfile.js：

 var gulp = require('gulp'),

               minifyCSS = require('gulp-minify-css'), 
          
    spriter = require('gulp-css-spriter'); 
          
 
          
gulp.task('css',  
          function() { 
          
 
          
     
          var timestamp = + 
          new Date(); 
          
     
          // 
          需要自動合並雪碧圖的樣式文件 
          
     
          return gulp.src('./src/css/style.css') 
          
        .pipe(spriter({ 
          
             
          // 
           生成的spriter的位置 
          
            'spriteSheet': './dist/images/sprite'+timestamp+'.png', 
          
             
          // 
           生成樣式文件圖片引用地址的路徑 
          
             
          // 
           如下將生產：backgound:url(../images/sprite20324232.png) 
          
            'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png' 
          
        })) 
          
        .pipe(minifyCSS()) 
          
         
          // 
          產出路徑 
          
        .pipe(gulp.dest('./dist')); 
          
}); 
         

 

 技巧 ：

 gulp-css-spriter默認會對樣式文件里，所有的background/background-image的圖片合並，

 但實際項目中，我們不是所有的圖片都需要合並。

 background-image: url(../slice/p1-3.png?__spriter);//有?__spriter后綴的合並

 background-image: url(../slice/p-cao1.png); //不合並 

 修改下面文件可以按需合並。

 node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js

 48行開始的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); 
          
                    } 
          
                } 
         

 如圖：

 

 

 執行效果：