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