本文主要面对前端初级新手,是我从事前端项目外包这一年多时间里积累的经验,提供一系列的工具和资料来帮助新手更高效的从事前端开发。但是由于本人水平有限,所以只能写一些初级的方法和工具。没有添加诸如
grunt
这类的更高级的工具,因为我对这块目前还没有很多实战经验。 此外,关于移动端的调试开发,也很少做过,所以本文没有很多相关信息,有待进一步补充。
原始而传统的前端页面重构工作流程
这里说的是我一开始前端相关工作时的最原始的工作流程,有部分可能你也在经历,有部分你经历过去了。 首先拿到设计稿或者是与客户沟通好设计需求。然后开始新建文件夹,将设计稿放好,新建
index.html
、
style.css
等等必要的资源文件。通常先找找之前的项目,复制类似的文件。然后开始按照设计稿写
HTML
结构和
CSS
代码,并且在需要图片的地方,切换到 PhotoShop 去切图。写完一次,摁下保存,然后切换到浏览器,摁下
F5
或者是
Ctrl+F5
强刷,看到效果是否满意。如果不满意,摁下
F12
呼出控制台,查看对应的 HTML 结构,在调试工具中修改参数值达到设计稿的需求,然后切换回去继续在编辑器中编写代码,反复到完成为止。 这个流程主要有一下几个问题:
- 每次都要重复的创建初始项目结构和文件,往往复制大量相同代码。
- 用不好的编辑器写
HTML
结构和 CSS
代码,效率比较低下。 - 不停地切换浏览器、编辑器和 PhotoShop 等窗口,并且调整刷新。
- 不停地重复上面第三步。
下面就来逐步优化这个工作流程。
拥有一个用来初始化的项目框架
这里的项目框架,并不是指
Bootstrap
这类的,而是一整套项目结构。包括常用的
HTML
、
CSS
、
JS 组件
和一些文件目录。在一些大公司中,往往会有这一整套打包好的框架,如果有相关项目,执行一条初始化命令,就给你复制下来一份。对于小公司或者个人来说,这类的项目框架就需要自己来总结了。 所以,我共享了一份我自己总结整理出来的项目框架:
ysass(实在想不出好名字) 。
ysass 主要基于
Sass 和
sofish 的开源项目
typo。灵感是来自我们
Deepdevelop 内部的前端框架,但是团队内部的框架是面向国外网站的,所以我重新整理了一下。
typo
为中文排版做了很多优化,经验丰富的
sofish 前辈考虑的也非常全面成熟,于是就拿过来用了。 这个项目框架的使用也非常简单,你只需要按照下面几步就可以:
- 下载、解压、将 ysass 命名为项目名称,删掉里面
README.md
等无用文件。 - 将设计稿扔进 PSD 文件夹中,观看 PSD 确定不需要的组件或功能,在相应文件夹中删掉无用文件。
- 打开
style.scss
文件,配置头部项目信息。 - 双击
convert.bat
文件,开始监听 SCSS 文件变动并编译。 - 打开
index.html
,修改头部信息,删掉或增加你的 JS 组件,开始书写你的语义化的 HTML 结构。 - 打开
scss\_var.scss
文件,添加项目常用变量。 - 打开
scss\_utils.scss
文件,添加你常用的 SCSS 函数。 - 打开
scss\_custom.scss
文件,编写项目主要 CSS 代码。 - 打开
scss\_media-queries.scss
文件,编写响应式相关功能。
别告诉我你没用接触过 Sass,你难道不知道在 Sass 中直接写 CSS 也是可以的么?再有,有
阮一峰老师那
半天就可以速成的 Sass 教程,就不会拿出点时间提高一下开发效率?
好工具让你事半功倍
好的开发工具是一定要学习和使用的,不要禁锢自己的思想,说自己是 XX粉。很久之前我就听说过神器
Sublime Text
,但是感觉用
NotePad++
已经足够了,于是仍然继续使用
NotePad++
,认为自己是 NPP 粉。后来,又看到一大波
Sublime Text
赞潮,很多大神也在用,于是就拿了半天在网上找了一篇文章照着用了一下。结果从此改用
Sublime Text
,因为配合插件,实在是比之前的编码效率提升 30% 以上。 所以,如果你用的不是
Sublime Text
,抓紧来用一下,
或许它不是最适合你的,但它绝对值得你去尝试一下! 使用
Sublime Text
除了本身好看之外,还有一个重要的原因就在于插件多、功能扩展强大。例如:
还有很多插件,比如高亮代码、代码补充等等,这些需要你自己搜索,但是上面两个是前端必备的。
Emmet
帮助你解决丑陋低效 HTML 问题,
Sass
帮你提高 CSS 的编码效率,前两个问题基本解决了。
用好浏览器
浏览器的兼容性测试
既然是前端工程师,又是偏向页面重构的,注定与浏览器脱不了干系。需要安装各种浏览器来调试或者做兼容性测试,一般要安装的浏览器和工具如下:
- Chrome 前端工程师必备的开发用的浏览器。
- Chrome canary 最新开发版的 Chrome 让你体验到最新的 HTML5 等等新功能
- Firefox 必备的开发用的浏览器。
- Safari 苹果浏览器,主要用来做兼容性,使用 Mac 电脑的同学,可以用这个浏览器调试手机上的网页。不过 Win 平台上的 Safari 已经停止开发了,在测试的时候,最好使用虚拟机安装 OS X 系统。
- IE 这个不需要安装,用 Win 系统的自己带着。要升级到 IE10 或者 IE11 。
- IETester 用来模拟早期 IE 浏览器的渲染模式,来快速检测页面兼容性问题。
- 虚拟机,VMware 或者 VirtualBox(推荐) 都是可以的。
之所以没有提到 Opera,是因为国内占有量很少,而且也改用了内核,调试工具也很难有亮点,所以没有必要再安装了。经常关注行业内比较有权威的数据参考资料,显然对你做浏览器兼容性有很大帮助,例如:
百度流量研究院(桌面端用户统计) 和
友盟数据(移动端设备统计)。 一般的兼容性测试要求如下: 1,普通项目或者个人项目,要求 IE8+ 以上兼容性,允许 CSS3 实现的效果优雅降级,整体不错位即可。 兼容到 IE8 是比较合理和轻松的,因为从 IE8 开始,IE 浏览器算是基本正常的浏览器了,大部分基础的 W3C 标准都正确实现了,不再需要想办法触发 hasLayout 这类东西来表现正常效果等。而且,IE6 和 IE7 的市场份额也在不断减少,你那小破网站会有几个用 IE6、7 访问的?这里只需要用 IE10 或 IE11 的开发者工具大体切换一下就 OK 了。
2,要求更加严格的兼容性测试,你需要使用 IETester 和虚拟机进行测试。 这点是比较麻烦的,因为 IETester 经常崩溃,有时候根本打不开。而 IE 内置的开发者工具,虽然可以渲染不同版本 IE,但实际上有部分元素被改动过了,所以测试出来的结果,并不一定是真正早期版本浏览器的效果。通常来说 IETester 测试的结果要准确一些。 需要注意,浏览器在不同操作系统中也有一些差异,之前遇到过相关项目,客户老是反馈在 IE8 上有 BUG,我用 IETester 和 IE10 开发者工具都没有问题,后来用了 XP 系统的虚拟机一看,果真是有问题。所以,测试兼容性最好的方法,就是用虚拟机安装各个系统,然后用原生系统+原生浏览器来做测试。虽然麻烦,但是在要求非常高的情况下,会更全面一些,一般要安装下面几个虚拟机:
3,至于 Chrome 和 Firefox 的兼容性,一般是没有问题的,用这些浏览器的人也一般比较高端,会经常升级,所以测试最新版就好了。
Chrome 还是 Firefox?
最初我是 Firefox 粉,特别热爱 FireBug 这个开发调试插件,但是 Firefox 实在是令人失望,貌似至今没有解决 Flash 的崩溃问题,打开速度很慢,相比 Chrome 的秒开实在是有一定的差距,特别是安装很多插件之后更明显。后来不得已转用 Chrome 作为主要调试工具。下面说一下两款浏览器比较好用的插件和技巧。
Firefox
1,
Firebug 必备的调试神器,大家都知道,不再赘述。 2,响应式设计视图,这是内置在 Firefox Web 开发者工具里面的一个工具,是我目前用过的
最好的用来调试响应式的工具(没有之一)。打开右上角
Firefox -> Web 开发者 -> 响应式设计视图
或者直接摁下
Shift + Ctrl + m
。具体效果看下图:
其他的插件不再赘述了。当然,Firefox 也有很多创新的功能,比如在
最新版的 Firefox 29 中,可以直接在开发者工具里面在线修改 Sass 或 LESS 的源代码,这些都证明了它是一款优秀开发者浏览器,就是卡的、崩溃的让人受不了,我用的还是 SSD 硬盘。
Chrome
Chrome 是当之无愧的最好的前端开发者浏览器,虽然界面和交互不如 Firebug,但是功能异常强大而且更新很快,带来很多创新性的功能。 1,将开发者工具放在侧边,用来快速看到响应式变化效果。不过不要使用这个来调试,因为它的页面宽度增加了滚动条的宽度,而且分辨率一闪而过,不如 Firefox 的响应式设计视图更加准确。
2,
LiveReload 插件,帮助你无刷新的查看页面效果。 它需要配合
Sublime Text
来使用,当你安装好了之后,点击右上角的图标,插件就会与
Sublime Text
链接起来,当你在
Sublime Text
中摁下保存,插件就会自动发送刷新指令到 Chrome 中进行刷新,这样就不需要你再切换到浏览器中,刷新浏览器了。
点击查看更多 LiveReload 的说明和帮助。 3,
Emmet LiveStyle 插件,帮助你实时看到修改的变化,而且支持将调试工具中变化的值保存到对应文件中。 这绝对是一个非常神奇又强大的工具,出自 Emmet 团队,需要 Chrome 和 Sublime Text 的支持。相比于上面的 LiveReload 来说,使用这个插件甚至连保存文件都不需要,当你在编辑文件的时候,无需保存,即可实时的在网页上看到效果。如果你在网页上用开发者工具修改 CSS 也会同步到对应的文件中。这样说太抽象了,可以看下官方的演示视频: 而且还可以在线用开发工具修改别人的网站,并把代码保存下来,还有什么比这个更碉堡?具体使用信息请看
Emmet LiveStyle 官方文档,这里不再赘述。 Chrome 神奇的开发插件还有很多很多,上面两个算是对我来说帮助非常大的。虽然看上去
Emmet LiveStyle
更加强大,已经包含了
LiveReload
插件的功能,但实际开发上,需要视情况配合使用。
Emmet LiveStyle
在开发者工具中调试,会修改到对应的 CSS 文件中,而不会修改 Sass 或者 Less 源文件,这种情况就需要
LiveReload
插件来实现无刷新了。 这样,对于有双屏或者一个23寸及以上的大显示器的你,根本不需要切换界面以及摁下好多遍保存键了。
回顾前端页面重构的开发流程
介绍完了这些工具和方法,下面再来回顾一下改进版的开发流程:
- 使用准备好的框架模板做初始化,直接复制过来,观看并思考 PSD ,抽出可复用模块,马上开始写代码。
- 使用 Emmet 和 Sass 等工具,让编码效率和质量大幅度提升。
- 使用 Chrome 的 LiveReload 和 Emmet LiveStyle 插件,配合双屏或者大屏显示器,实现无切换无刷新实时看到效果。
- 对于在线修改,可以使用 Sftp 插件直接连接 FTP 服务器,或者使用 Emmet LiveStyle 将在线调试好的 CSS 文件直接保存下来,发给客户覆盖。
恩,配合多种工具的改进版的开发流程,提升了不少的效率和编码质量吧? 原文链接:
http://blog.wpjam.com/article/build-frontend-development-environment/