整    理：肖雅君

时    间：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

整    理：贾会迎、晋哲

时    间：2016-02-05

说    明：PS处理同类型不同尺寸图标的快捷方法

问题：当同一版块中的每个图标的宽高各异时，在切图时需要为这些图标设置一个统一的宽高，方便样式统一编写。如何快速准确的确定切图尺寸，同时分成两套不同状态样式？

例如以下按钮的图标：

操作步骤
一、同时选择几个图标的图层

二、复制图层—新建—裁切（透明像素部分）。得到如下图

三、统一颜色样式（将绿色图标改为灰色）
1、提取颜色值，可保存至背景色

2、在图层空白处双击，调出“图层样式”面板，设置“颜色叠加”

3、图标颜色改变为灰色（效果）

四、将图标水平垂直居中，多个图标重叠显示，来确定图标的准确尺寸。

五、确定图标大小，逐一显示并保存
1、裁切透明像素，获得图标的准确大小

2、查看此时“图像--画布”大小，根据图标实际需要设置最大宽高值，最好设置为偶数，以方便样式设置。如下图，高度可以设42px、46px、50px等等

3、按设计图顺序逐一显示图层并保存

六、设置第二套状态样式（如图绿色）。
1、提取交互图标的颜色，可保存在前景色中

2、在图层空白处双击，调出“图层样式”面板

3、选择打开“颜色叠加”面板，设置叠加的颜色

4、在图层区域右击，选择“拷贝图层样式”

5、选中其他图层，右击选择“粘贴图层样式”，后逐一显示并保存图片。

七、保存的图标文件效果，注意按照设计图顺序和统一的规则命名