首先 安装node.js工具在 node基础上安装cnpm 再安装gulp
先 全局安装gulp
cnpm install gulp -g
再局部项目安装gulp
cnpm install gulp --save-dev
你需要安装实现雪碧图需要的插件
生成gulpfile.js进行配置
cnpm install gulp-spritesmith --save-dev //局部安装插件
var gulp = require("gulp");//在gulpfile.js中通过别名调用插件
var spritemin = require("gulp-spritesmith");//在gulpfile.js中通过别名调用插件
gulp.task("sprite",["sass”,“sass"],function(){ //定义任务(名字 通过数组指定本次任务在哪些任务后完成 本次任务加工)
return gulp.src("img/*.*") // 指定操作源文件地址
.pipe(spritemin({ //管道加工成雪碧图
imgname:"sprite.png",//生成图片的名字
cssname:"css/sprite.css",//生成css的文件
padding:10,//图片的距离
algorithm:"left-right"//定义雪碧图图片合并方式
}))
.pipe(gulp.dest("output/img")) //指定输出源文件地址
})