欢迎访问MEETSITE(见站), 登录
新闻动态

web前端如何优(zhuang)雅(bi)的切图

时间:2017.03.20 发布者:MEETSITE(见站)

提起切图,想起一则比较尴尬的事情,15年初在博主刚毕业第一份工作的面试中,面试官问我:“你平时切图都用什么软件?”,耿直的我以为他是问我用什么软件切片,遂回答photoshop。。。后面才明白,在我所在这个城市的前端圈里,切图指的就是将设计稿还原成静态页面的过程。

web前端如何优(zhuang)雅(bi)的切图

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

  1. 需要快速完成

  2. 可能需要一套新的UI

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

经过几次非常惨痛的紧张赶工,逐渐摸索出一些经验,跟同事(@隔壁老王)一起完善了一套较为好用的完整的前端自动化切图流程。简单总结下就是:

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

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

相关:

gulp

利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 详细

sass

Sass 是成熟、稳定、强大的 CSS 扩展语言。详细

scss

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。

下面简单搭个架子来演示这套流程(以下代码演示环境均为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。

贴上项目目录树:

web前端如何优(zhuang)雅(bi)的切图

项目依赖项 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:

web前端如何优(zhuang)雅(bi)的切图

web前端如何优(zhuang)雅(bi)的切图
项目搭好了,下面就是安装依赖了,在项目目录下执行命令:

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

可以起飞了:

gulp

来一波GIF演示吧:

web前端如何优(zhuang)雅(bi)的切图

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

今天的文章来源于我们Meestite(见站)首席前端工程师@JEREMY的博客,有啥问题欢迎在下方留言,小编会一一传达给他的~

Meetsite(见站),您身边的建站技巧分享专家!

联系我们

  • 咨询热线:18555112860
  • QQ:1213552269
  • 邮箱:info@meetsite.cn

扫一扫,获取最新资讯
Copyright © 2019 Meetsite Inc, All Right Reserved. 安徽链为网络技术有限公司版权所有 皖ICP备12035407号 隐私条款