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