gulp 生成 css-spriter

使用gulp-css-spriter 預設會合並CSS中的所有圖片，即生成一張css spriter圖片

檔案路徑：

index.html
gulpfile.js
sass

a.sass
b.sass

img //存放原始圖片和css spriter圖片

1.png
2.png

css //存放壓縮後的css和經過圖片處理的css檔案

gulpfile.js頁面

var gulp = require('gulp'),    
    sass = require('gulp-sass'),    
    minifycss = require('gulp-minify-css'),    
    concat = require('gulp-concat'),    
    merge = require('merge-stream'),    
    spriter = require('gulp-css-spriter'),    
    rename = require('gulp-rename');

//正常的編譯sass 和壓縮
gulp.task('css1', function() {    
   var miancss = gulp.src(['./sass/b.scss', './sass/a.scss'])        
     .pipe(sass()).pipe(minifycss()) //對樣式進行壓縮        
     .pipe(concat('./main.min.css'))        
     .pipe(gulp.dest('./css/'));    
   return merge(miancss);
});

//合併css圖片 --執行了css1,編譯了sass之後。  再執行css2壓縮裡面的圖片
gulp.task('css2', ['css1'], function () {    
  gulp.src(['./css/main.min.css']) //該任務針對的檔案         
  .pipe(spriter({            
    // 生成的spriter圖片存放的位置            
    spriteSheet: './img/a.png',            
    // 生成後的樣式檔案圖片引用地址的路徑            
    pathToSpriteSheetFromCSS: '../img/a.png'}      
  ))       
  .pipe(rename('a.min.css'))        
  .pipe(gulp.dest('./css/'));
});

複製程式碼

sass || css裡的圖片最終會被合成一張，並且在最終的樣式檔案裡，圖片引入的地址全部變成自定義的spriter地址，還會自己加上background-postion。如果原來選擇器裡就有background-position，則會覆蓋。

注意，原本就使用了css spriter的圖片在這一環合併會出錯。它會直接覆蓋掉原本的background-postion。

sass || css裡不需要特別申明，會直接全部圖片都合併。如果圖片路徑後面加了?xx則該圖片不參與合併

如果希望只合並檔案裡的部分圖片，可以修改 gulpfile.js裡的spriter屬性includeMode

includeMode:

explicit 直接宣告需要合併圖片在圖片前加/* @meta {"spritesheet": {"include": true}} */的最終會被合併成一張圖片
implicit 為預設值，會把所有定義的圖片最終合併為一張。其中不包含定義了/* @meta {"spritesheet": {"include": false}} */的圖片

舉例：

設定includeMode:"implicit"，或者不設定時：

如果需要某些圖片不參與合併，則在sass程式碼前面申明：

/* @meta {"spritesheet": {"include": false}} */

background:url(../a.jpg); //則a.jpg不參與合併，切記meta放在background上面，並且壓縮後不要去掉註釋

設定includeMode:"explicit"：

如果需要某些圖片需要被合併，則在sass程式碼前面申明，最終生成的圖片會包含所有定義為true的圖片：

/* @meta {"spritesheet": {"include": true}} */

gulp 生成 css-spriter

相關文章