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