整 理：肖雅君
时 间：2016-02-05
说 明：gulp-css-spriter 将css代码中的切片图片合并成雪碧图
一、下载安装gulp
1.1 下载安装node.js
1.2 命令行测试是否安装成功
1.3 定位到项目
1.4 安装gulp
二、开始使用gulp
2.1 新建gulpfile.js文件
三、gulp-css-spriter
3.1 gulp-css-spriter使用步骤
3.2 使用技巧
一、下载安装gulp
1.1 下载安装node.js
下载链接：https://nodejs.org/en/ 下载后直接安装即可。
1.2 命令行测试是否安装成功
Cmd
输入命令：Node –v 看是否返回node版本号,若是返回则安装成功。
输入命令：npm –v 同上是否返回npm的版本号
如下图：则是安装成功。
Ps: NPM是基于命令行的node包管理工具，它可以将node的程序模块安装到项目中，在它的官网https://npmjs.org/ 中可以查看和搜索所有可用的程序模块。
1.3 定位到项目
直接输入d: 按回车键，进入d盘，再进入到安装文件夹，如下图：
1.4 安装gulp
遇到的问题：
参考资料中有sudo npm install –g glup安装命令，但是是出错的。
Sudo是以管理员身份执行命令,是切换到最高用户权限，su是切换用户，这是linux里才有的，windows是没有的。
将sudo去掉，用npm install -g gulp安装也是不行的。
使用npm install --global gulp是可以安装的，但是有一个warn警告。
查看版本号也是能查看到的：
二、开始使用gulp
2.1 新建gulpfile.js文件
建立gulpfile.js文件，作为它的主文件，放入到自己的项目目录中。
然后在gulpfile.js中定义自己的任务。
三、gulp-css-spriter
功能：将css代码中的切片图片合并成雪碧图
3.1 gulp-css-spriter使用步骤
（1）安装gulp-css-spriter
输入命令npm install gulp-css-spriter
安装成功后自己建的文件里会产生node_modules文件夹，里面会有一个刚安装的gulp-css-spriter文件夹。
（2）配置gulpfile.js文件
var gulp = require('gulp'),
spriter = require('gulp-css-spriter');
gulp.task('css', function(){
var timestamp = +new Date();
//需要自动合并雪碧图的样式文件
return gulp.src('styles/style.css')//雪碧图的原路径文件
.pipe(spriter({
// 生成的spriter的位置
'spriteSheet': 'combine/images/sprite'+timestamp+'.png',
// 生成样式文件图片引用地址的路径
// 如下将生产：background:url(images/sprite20160205.png)
'pathToSpriteSheetFromCSS': 'images/sprite'+timestamp+'.png'
}))
//产出路径
.pipe(gulp.dest('combine'));
}); //产出路径
(3)执行编译输入命令：gulp css
(4)编译前后文件目录截图对比
a.编译之前：
合并前文件目录：
合并前style.css样式：
合并前图片文件夹：
b.编译之后：
合并后文件目录：
combine文件夹里的文件：
combine里的style.css：
combine里的图片文件夹：
(5)可能出现的问题：
在编辑后可能会出现如下问题：
Cannot find module ‘gulp-minify-css’;
需要再次安装gulp-minify-css。执行命令：npm install gulp-minify-css
安装完毕后再次编译：（点击可查看动图编译过程）
3.2 使用技巧
gulp-css-spriter默认会对样式文件里，所有的background/background-image的图片合并，但实际项目中，我们不是所有的图片都需要合并。
background-image: url(../images/data3.png?__spriter);//有?__spriter后缀的合并
background-image: url(../images/part-bg.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);}
}
再次执行即可。
参考链接：
https://github.com/laoshu133/gulp-css-spritesmith
https://github.com/aslansky/css-sprite
