一、工具选择
CSS预处理语言LESS
构建工具gulp(基于node环境)
gulp插件:
gulp-connect——主要是用来运行一个webserver
npm install --save-dev gulp-connect
插件介绍:https://www.npmjs.com/package/gulp-connect
gulp.spritesmith——雪碧图
npm install gulp.spritesmith --save-dev
插件介绍:https://www.npmjs.com/package/gulp.spritesmith
gulp-less——less转CSS
npm install gulp-less --save-dev
插件介绍:https://www.npmjs.com/package/gulp-less
PS切图工具:
cutandslice——这是一款快速裁切透明图标的工具,配合spritesmith使用,可以很快的生成雪碧图片,整合多张小图,减少有服务器请求。
工具网址:http://www.cutandslice.me/#en
教程网址:https://img.zhankr.net/caykn4d1ctv212029.png
gulp.task('sprite_common', function () { return gulp.src('project/images/front/icon/common/*.png')//需要合并的图片地址
.pipe(spritesmith({
imgName: 'icon.png',//保存合并后图片的地址
cssName: 'sprite.less',//保存合并后对于css样式的地址
padding:5,//合并时两个图片的间距
algorithm: 'top-down',//注释1
cssTemplate: function (data) {
var arr=[];
data.sprites.forEach(function (sprite) {
arr.push(".icon."+sprite.name+
"{" +
"background-image: url('/images/front/"+sprite.escaped_image+"');"+
"background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"+
"width:"+sprite.px.width+";"+
"height:"+sprite.px.height+";"+
"}\n");
});
return arr.join("");
} }))
.pipe(gulp.dest('project/less/part'));
});
task[del_old_icon]:删除旧的icon.png
gulp.task('del_old_icon',function(){
del(['./project/images/front/icon.png']);
})
task[dist_icon]:移动新的icon.png到/image下
注:dist_icon执行前会先执行del_old_icon
gulp.task('dist_icon',['del_old_icon'],function(){
return gulp.src(['./project/less/part/icon.png')
.pipe(gulp.dest('./project/images/front/'));
})
task[del_dist]:删除dist目录
gulp.task('del_dist',function(){
del('./project/dist/');
})
- 整合任务以便调用执行
总的任务整合为两部分,一部分为雪碧图整合,另一部分为dist目录生成。gulp.task('default',['dist_Less','dist_html','dist_js','dist_img']);
gulp.task('sprite',['sprite_common']);