构建初级前端页面重构开发环境

标签: 开源程序 | 发表时间:2014-03-08 22:43 | 作者:于江水
出处:http://blog.wpjam.com

本文主要面对前端初级新手,是我从事前端项目外包这一年多时间里积累的经验,提供一系列的工具和资料来帮助新手更高效的从事前端开发。但是由于本人水平有限,所以只能写一些初级的方法和工具。没有添加诸如 grunt 这类的更高级的工具,因为我对这块目前还没有很多实战经验。

此外,关于移动端的调试开发,也很少做过,所以本文没有很多相关信息,有待进一步补充。

原始而传统的前端页面重构工作流程

这里说的是我一开始前端相关工作时的最原始的工作流程,有部分可能你也在经历,有部分你经历过去了。

首先拿到设计稿或者是与客户沟通好设计需求。然后开始新建文件夹,将设计稿放好,新建 index.htmlstyle.css 等等必要的资源文件。通常先找找之前的项目,复制类似的文件。然后开始按照设计稿写 HTML 结构和 CSS 代码,并且在需要图片的地方,切换到 PhotoShop 去切图。写完一次,摁下保存,然后切换到浏览器,摁下 F5 或者是 Ctrl+F5 强刷,看到效果是否满意。如果不满意,摁下 F12 呼出控制台,查看对应的 HTML 结构,在调试工具中修改参数值达到设计稿的需求,然后切换回去继续在编辑器中编写代码,反复到完成为止。

这个流程主要有一下几个问题:

  1. 每次都要重复的创建初始项目结构和文件,往往复制大量相同代码。
  2. 用不好的编辑器写 HTML 结构和 CSS 代码,效率比较低下。
  3. 不停地切换浏览器、编辑器和 PhotoShop 等窗口,并且调整刷新。
  4. 不停地重复上面第三步。

下面就来逐步优化这个工作流程。

拥有一个用来初始化的项目框架

这里的项目框架,并不是指 Bootstrap 这类的,而是一整套项目结构。包括常用的 HTMLCSSJS 组件 和一些文件目录。在一些大公司中,往往会有这一整套打包好的框架,如果有相关项目,执行一条初始化命令,就给你复制下来一份。对于小公司或者个人来说,这类的项目框架就需要自己来总结了。

所以,我共享了一份我自己总结整理出来的项目框架: ysass(实在想不出好名字) 。

ysass 主要基于 Sasssofish 的开源项目 typo。灵感是来自我们 Deepdevelop 内部的前端框架,但是团队内部的框架是面向国外网站的,所以我重新整理了一下。 typo 为中文排版做了很多优化,经验丰富的 sofish 前辈考虑的也非常全面成熟,于是就拿过来用了。

这个项目框架的使用也非常简单,你只需要按照下面几步就可以:

  1. 下载、解压、将 ysass 命名为项目名称,删掉里面 README.md 等无用文件。
  2. 将设计稿扔进 PSD 文件夹中,观看 PSD 确定不需要的组件或功能,在相应文件夹中删掉无用文件。
  3. 打开 style.scss 文件,配置头部项目信息。
  4. 双击 convert.bat 文件,开始监听 SCSS 文件变动并编译。
  5. 打开 index.html ,修改头部信息,删掉或增加你的 JS 组件,开始书写你的语义化的 HTML 结构。
  6. 打开 scss\_var.scss 文件,添加项目常用变量。
  7. 打开 scss\_utils.scss 文件,添加你常用的 SCSS 函数。
  8. 打开 scss\_custom.scss 文件,编写项目主要 CSS 代码。
  9. 打开 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 了。

IE 开发者工具

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 也有很多创新的功能,比如在 最新版的 Firefox 29 中,可以直接在开发者工具里面在线修改 Sass 或 LESS 的源代码,这些都证明了它是一款优秀开发者浏览器,就是卡的、崩溃的让人受不了,我用的还是 SSD 硬盘。

Chrome

Chrome 是当之无愧的最好的前端开发者浏览器,虽然界面和交互不如 Firebug,但是功能异常强大而且更新很快,带来很多创新性的功能。

1,将开发者工具放在侧边,用来快速看到响应式变化效果。不过不要使用这个来调试,因为它的页面宽度增加了滚动条的宽度,而且分辨率一闪而过,不如 Firefox 的响应式设计视图更加准确。

使用 Chrome 快速调试响应式

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寸及以上的大显示器的你,根本不需要切换界面以及摁下好多遍保存键了。

回顾前端页面重构的开发流程

介绍完了这些工具和方法,下面再来回顾一下改进版的开发流程:

  1. 使用准备好的框架模板做初始化,直接复制过来,观看并思考 PSD ,抽出可复用模块,马上开始写代码。
  2. 使用 Emmet 和 Sass 等工具,让编码效率和质量大幅度提升。
  3. 使用 Chrome 的 LiveReload 和 Emmet LiveStyle 插件,配合双屏或者大屏显示器,实现无切换无刷新实时看到效果。
  4. 对于在线修改,可以使用 Sftp 插件直接连接 FTP 服务器,或者使用 Emmet LiveStyle 将在线调试好的 CSS 文件直接保存下来,发给客户覆盖。

恩,配合多种工具的改进版的开发流程,提升了不少的效率和编码质量吧?

扩展阅读

总的来说,这是一套比较初级的工作流程,你还可以继续扩展阅读:

  1. Genymotion:超赞的安卓虚拟机
  2. 移动终端重构Workflow
  3. 林子杰-前端工程化与工具链实践.ppt
  4. 利用 Grunt (几乎)无痛地做前端开发 (一)

欢迎补充~

>>>继续阅读 构建初级前端页面重构开发环境的全文 …

© 我爱水煮鱼 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关 [建初 前端 页面] 推荐:

构建初级前端页面重构开发环境

- - 我爱水煮鱼
本文主要面对前端初级新手,是我从事前端项目外包这一年多时间里积累的经验,提供一系列的工具和资料来帮助新手更高效的从事前端开发. 但是由于本人水平有限,所以只能写一些初级的方法和工具. 没有添加诸如 grunt 这类的更高级的工具,因为我对这块目前还没有很多实战经验. 此外,关于移动端的调试开发,也很少做过,所以本文没有很多相关信息,有待进一步补充.

手机wap页面前端的一点体会

- Clatin - BlogJava-首页技术区
手机端的html页面就像回到了最早的纯文本时代~~. 没有JS,只有单纯的div+css~容易上手,但是也有很多限制. 不在技术上,更多的是一些适合手机屏幕的适配~. 移动平台有多种,iOS, Android, WP7, Sybian …. 移动浏览器就更多,我的Android手机中装了10款浏览器,分别是:原生google的,qq,UC,海豚,firefox,opera,天天,go,skyfire和x浏览器GL.

浅谈WEB页面提速(前端向) - vajoy

- - 博客园_首页
记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就. 然后我不知道怎么写下去了,就在群里问了那群狗头军师,结果是这样的. 好的,是时候“语锋一转”切回主题了 —— 如何提升我们站点页面的访问速度、减少等待时间,从而最大化地提升用户访问体验呢.

angularJs 前端的页面分解与组装

- - Web前端 - ITeye博客
将分解的页面写成directive.  事实上,还可以更进一步,将templateUrl写成可传入的参数. 但是那样的话就跟下面这个方法差不多了. 使用ng-include非常简单. 请注意src的参数是表达式,如果要传静态的字符串参数,请用引号将参数包裹起来. 对ng-include稍作处理,可以实现更复杂的功能.

页面构建和js前端不得不说的那点事儿

- - 微博UDC
作为微博的页面构建工程师,主要职责就是利用html&css,高质量的完成静态页面的制作,保证项目的按时完成. 而页面需要的js效果则交给下游的js前端工程师去做. 但在大家的思维定势里可能觉得这两个岗位应由一个人来完成最好,毕竟,页面构建工程师写的html结构不一定是js工程师想要的那种,js工程师可能有更高效的方式.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长,但随着Web技术的逐渐深入,今后将会在以下几方面发力. JavaScript的兄弟们.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点:直接使用浏览器内存的缓存数据,减少网站后台压力,用户体验(速度)好. 缺点:对于时时变化的动态页面,这种情况就不能容忍了,因为每次访问的都是第一次访问的内容,这样即使所请求的页面已经变化了,用户也不可能知道,所以此场景必须要消除这种缓存的影响. 延迟加载,将资源延迟到需要的时候的加载,例如detail页面,相关产品推荐,当用户浏览更多的信息往下拉动滚动时,才进行加载,异步加载可以大幅减少对后端资源的使用,在需要的时候加载,是资源合理使用常用的方式,但是也带来一个问题,当往下拉才去加载,如果性能不够好,用户的体验其实是不好的,“菊花”转动的时间会比较长,同时异步加载对前端性能的作用也是非常明显的,渲染的节点数量大幅减少.

Web 前端测试

- - Web前端 - ITeye博客
Web 网站测试流程和方法(转载). 进行正式测试之前,应先确定如何开展测试,不可盲目的测试. 一般网站的测试,应按以下流程来进行:. 1)使用HTML Link Validator将网站中的错误链接找出来;. 2)测试的顺序为:自顶向下、从左到右;. 3)查看页面title是否正确. (不只首页,所有页面都要查看);.

前端xss攻击

- - SegmentFault 最新的文章
实习的时候在项目中有接触过关于xss攻击的内容,并且使用了项目组中推荐的一些常用的防xss攻击的方法对项目进行了防攻击的完善. 但一直没有时间深入了解这东西,在此,做一个简单的梳理. xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入的恶意html代码会被执行,从而达到恶意用户的特殊目的.

Web页面入门

- - 可咔酷 | 网络杂货铺
开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有. 确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化.