前端工作流：工具集总篇

今天在这里看到这篇工具集的文章，转过来是想着我也应该整理一份自己的工具集。话说前段开发无非就是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