用 gulp.spritesmith 自动化雪碧图

hongmeigui22027

　　一、安装nodejs之后，要设置两个环境变量
　　在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口
　　新建2个环境变量，它们的值分别是nodejs根目录下的node_modules路径 及npm的路径
　　1.变量：NODE_PATH  值：D:\www\nodejs\node_modules
　　2.变量：PATH 值：D:\www\nodejs\npm
　　二、进入images上一层目录，运行

npm install gulp gulp-sass gulp-imagemin gulp.spritesmith
　　三、官方demo(以下是gulpfile.js)

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
var spriteData = gulp.src('images/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
return spriteData.pipe(gulp.dest('output/'));
});
　　四、运行最终生成的是sprite.png和sprite.css