前端工作流:工具集总篇

文章目录
  • csso
  • Autoprefixer
  • Sprites
  • Image optimization
  • Browserify
  • 测试
  • 其他
  • Reference

今天在这里看到这篇工具集的文章,转过来是想着我也应该整理一份自己的工具集。话说前段开发无非就是css/html/js/ps等的处理工作。说多不多,说少也不少。

前端博客总结:

CSSO第一次听到;

autoprefixer不如prefixer,因为这个插件太先进了,支持的浏览器前缀参考CanIuse上的,一些人还在使用老的浏览器,而且也需要对少部分的浏览器做处理,而它却没有,建议目前的大环境下还是使用多几个前缀标志。

sprite在compass下使用挺方便的,有空可以试一下作者提到的下面这个插件试试;

图片压缩基本没用到,我都是直接使用ps最小最优输出,压缩图片可能会失真。

js这个思路挺好的,有空也去试下,js的测试的只用到jshint,不怎么会。感谢这个作者写出这么好的文章:访问他的博客

受到generator-frontend的启发,整理了一套前端开发环境的脚手架(scaffold)。当然前端相关的工具非常多,随时都有可能出现更好的替代方案,我也会保持更新。也正因为选择有很多,所以其实前端的开发环境很难说统一,不同的人可能倾向于不同的选择和配置,这里列出来的权当参考了。

csso

csso是比简单的压缩掉空格的cssmin更智能的一个工具,所以压缩率相对来说会稍微高一点。

另外为了更好的压缩,CSS属性规则的书写最好有个统一的顺序,我比较倾向于参考css-tricks上总结的一种格式:

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  float: left;
  clear: both;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff

  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

box-model从内向外写: size -> padding -> border -> margin

Autoprefixer

grunt-autoprefixer

Autoprefixer用来自动给css3属性添加浏览器前缀,这样就可以不用再关心前缀的问题了,只要在CSS里面写好标准CSS3属性就好。如果CSS里面有写好的前缀也不会混乱,所以和其他CSS预处理语言也可以很好的配合。

Autoprefixer用到Can I Use的数据库来定制生成的前缀,可以指定要针对的浏览器。

Sprites

grunt-spritesmith

之前很长一段时间都只有Compass提供自动sprite的功能,现在终于有一个可以不依赖于特定预处理语言的工具了,grunt-spritesmith输出支持CSS,JSON,SASS,SCSS,LESS,Stylus。

Image optimization

关于图片压缩的工具介绍可以看一下这篇Tools for image optimization

具体用哪一个更好,Paul Irish在评论里面有说一句:Automate everything.

所以貌似grunt-contrib-imagemin就够了,针对PNG已经有了推荐的pngquant支持。

Browserify

JavaScript模块化常见的方案有RequireJS, SeaJS, Component, Browserify等等,个人感觉最简单直观的还是Browserify。在前端完全按照NodeJS的方式来写模块,最后统一打包成一个文件,没有什么异步加载的考量。

相关的grunt插件:grunt-browserify

一些关心的功能点:

  • 可以忽略指定的文件或文件夹(避免打包输出所有的文件,比如单独的模块)
  • 可以指定文件打包成独立的文件供其他文件require(比如共用的一个common.js)
  • 支持source map帮助调试
  • 各种transform插件支持(比如编译html模板到js代码

测试

JS测试这一块的水很深,可能到时候抽空单独写一篇JavaScript测试相关的。

测试工具(库)选择:Mocha + Chai + Sinon

Chai用来指定断言风格(BDD/TDD),Sinon用来做spy,mock之类的。

generator-mocha可以用来生成一个mocha的scaffold,使用grunt-mocha和grunt整合,但是如果要测试用例跑在PhantomJS里面,要注意一下mocha.run()的调用方式,默认生成的index.html模板有点问题,在PhantomJS里面测试用例会跑两次,见这个issue

其他

Bower是一个前端的包管理器,可以用来安装管理前端用到的相关框架或组件,比如jQuery(想想以前多少次去手动搜索下载jQuery库)等等。

Bower是引用github仓库源的,有时候可能只是想下载一个单独的库文件,不想用bower拉下来整个仓库,于是有了pulldown,算是个人用的辅助工具吧。

另外,还有个静态资源文件rev(刷缓存)的插件grunt-usemin,通过hash文件内容更改文件名,那种单纯改一个url引用后面的版本号参数太不靠谱了。

Reference

汇总写的一个Demo:backbone-mocha-example

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:前端工作流:工具集总篇 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/webfront-tools.html)

发表评论

请登录后发表评论:

“前端工作流:工具集总篇”有2个评论

  1. 王东满

    = = 好多都没见过,有时间才好好研究一下,得自己整理一篇工具文章才行。

    登录回复
    • 前端博客

      嗯,这些前端开发还是有必要了解的。现在的话你去试试用grunt开发,都用工作流。不用手动压缩和移动文件之类的。

      登录回复