gulp多张图片自动合成sprite图片(Mac环境)



1、安装nodejs,直接到nodejs官网下载安装包,双击安装即可。

2、创建工程目录,准备好放图片的目录
$ cd
$ mkdir ~/Desktop/gulp_project
$ cd ~/Desktop/gulp_project
$ mkdir images


3、把需要用到的图片放到~/Desktop/gulp_project/images目录下

4、开始,输入以下简单几条命令即可搞定
$ sudo npm install --global gulp-cli //安装全局gulp
$ sudo npm init //生成package.json文件,可以一直按Enter
$ sudo npm install gulp //安装本地gulp模块
$ sudo npm install --save-dev gulp.spritesmith //安装sprite模块


4.1 编写gulpfile.js
var gulp=require('gulp'),spritesmith=require('gulp.spritesmith'); //引入gulp和gulp.spritesmith模块

gulp.task('default', function () {
return gulp.src('images/*.png')//需要合并的图片地址,此处为png后缀的图片
.pipe(spritesmith({
imgName: 'images/sprite.png',//保存合并后图片的地址
cssName: 'css/sprite.css',//保存合并后对于css样式的地址
padding:5,//合并时两个图片的间距
}))
.pipe(gulp.dest('dist/')); //最终结果放在哪里
});


4.2 运行
$ sudo gulp //在工程目录下执行

到目录~/Desktop/gulp_project/dist下查看结果,生成了两个文件
css/sprite.css
/*
Icon classes can be used entirely standalone. They are named after their original file names.

Example usage in HTML:

`display: block` sprite:



To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
display: inline-block;
}

// HTML

*/
.icon-action_btn_inner_dot {
background-image: url(../images/sprite.png);
background-position: 0px -47px;
width: 40px;
height: 8px;
}
.icon-action_btn_no_dot {
background-image: url(../images/sprite.png);
background-position: 0px 0px;
width: 70px;
height: 42px;
}
.icon-action_btn_with_dot {
background-image: url(../images/sprite.png);
background-position: -75px 0px;
width: 70px;
height: 42px;
}

和图片images/sprite.png


Demo下载地址https://pan.baidu.com/s/1qY2Gypm

Enjoy!

标签: none

如果您满意,请识别二维码打赏

评论已关闭