前端工程师手册

自动化流程

前端的开发不同于后端,涉及的东西有很多,后台通常的流程就是:创建->编码->测试。而前端的制作,包含了切图->项目构建->编译(less,coffeescript)->兼容性->测试->发布等等多道流程。

常规的前端流程

  • 搭建基础的项目骨架。包含创建模版(html、jade、haml)、脚本(javascript、coffeescript)、样式(css、less、sass、stylus)文件
  • 启动本地服务器,比如MAMP
  • 切图+编码页面,搭建界面
  • 保存,刷新浏览器查看预览,并且进行调整
  • 如果偶遇需要编译的文件,还要使用工具对其(jade、coffeescript、less、sass…)编译
  • 编码交互和事件
  • 保存,刷新浏览器,手动触发检查
  • 执行测试用例
  • 代码检测, 优化
  • 移除调试代码
  • 静态资源合并与优化, javascript和css文件的合并与压缩
  • 打包上传到服务器
  • 部署测试环境
  • 灰度发布现网

缺点:在开发的中后期,代码会庞大,维护起来比较费力,修改和新增都担心对之前的会有影响,且还担心线上的版本有问题,需要重新部署。

工具化

以上的流程中,其实有些内容,比如切图,刷新,测试,部署都可以通过工具化的方式进行优化。

大平台公司对工具化的坚持是一致的:凡是被不断重复的过程,将其工具化,绑定到自动化流程之中。技术产品也需要Don’t make me think的方式来推广最佳实践。总而言之:依靠工具,而不是经验。

nodejs的出现,不敢说改变后端的开发很多,但是对前端的工具化确实进步了很多。

自动化

有了工具之后,就是要想办法利用工具达到流程的自动化。

Yeoman

Yeoman是一款现代Web应用的脚手架工具,也是一个工作流。它包含了yo, grunt, bower三个工具。

yo

脚手架工具,帮助构建项目骨架。

bower

Bower是用于Web前端开发的包管理器。它运行在Git之上(因此必须先安装Git),默认情况下会去Github下载,并存放在bower_components目录下。

grunt

自动化工具,通过package.json来安装依赖的差距,使用gruntfile.js文件来编写要执行的任务。

gulp

grunt使用多了就会发现任务编写过程的麻烦,后来居上的gulp是一个很好的替代,我已经在使用,并且离不开了!

参考资料