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}} */