提起切图，面试官一般会问：“你平时切图都用什么软件？”，耿直的你是不是以为他是问你用什么软件切片，遂回答photoshop。。。后面才明白，在你所在这个城市的前端圈里，切图指的就是将设计稿还原成静态页面的过程。

　　可能有很多大公司前端会分设重构跟JS两个岗位，所以有的前端同学是不用切图的，或者是UI同学去制作静态页。但是从个人成长角度来说，南京万和Web前端培训觉得前端精通DOM跟CSS技术也是很有必要的。当然这个问题仁者见仁智者见智。在企业里，因为部分项目赶着上线的原因，曾经不止一次经历过短时间内需要完成大量切图任务，这些项目通常具有一下特点：

　　1.需要快速完成

　　2.可能需要一套新的UI

　　3.非常有可能会有较大量的改稿

　　在这里，南京万和Web前端培训分享一套较为好用的完整的前端自动化切图流程。简单总结下就是：

　　·利用scss去解决css的快速开发和模块化

　　·gulp自动化去完成例如scss编译，html模块合成，雪碧图自动生成，静态资源压缩这些费时费力的琐碎工作

　　相关：

　　下面简单搭个架子来演示这套流程（以下代码演示环境均为windows）

　　首先安装环境，gulp依赖node.js，所以需要安装node.js（windows下需要正确配置环境变量），安装过程略去。

　　检测是否安装成功：

　　在Terminal上输入以下命令：

　　node -v //v6.9.1 (结果为node版本)

　　继续检测npm仓库是否正常

　　npm -v //3.10.8 (你的结果可能跟我不同，毕竟大家版本可能会不一样)

　　注：后续可能会安装一些npm上面的包，因为国内网络环境不稳定，可能会安装失败或者缓慢，推荐使用淘宝镜像cnpm，如果你已安装cnpm，下文中所有npm命令请换成cnpm。

　　贴上项目目录树：

　　项目依赖项 package.json 内容：

　　{ "name": "UI_build", "version": "1.0.0", "description": "gulp project", "main": "index.js", "author": "Jeremy", "license": "ISC", "dependencies": { "browser-sync": "^2.17.5", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-clean-css": "^2.0.13", "gulp-file-include": "^0.13.7", "gulp-rename": "^1.2.2", "gulp-replace": "^0.5.4", "gulp-sass": "^2.3.2", "gulp.spritesmith": "^6.2.1", "minimist": "^1.2.0"

　　gulp配置 gulpfile.js：

　　项目搭好了，下面就是安装依赖了，在项目目录下执行命令：

　　npm install //安装package.json中的依赖包

　　可以起飞了~

　　南京万和Web前端培训分享的大致内容就是这样了，还有很多其他的功能都可以通过自己写插件或者使用npm上面的一些包实现。例如自动合成雪碧图，我们就是使用gulp.spritesmith来实现的，由于篇幅问题就不在此赘述了。