今天突然心血来潮，想把前端的一些人工工作流程自动化，其实之前已经在用grunt进行自动化构建，但总是觉得还是有些事情未做好。首先说说，前端平时需要做那些自动化吧：
1. 先讲HTML，每个项目每个页面都需要统一的头部，其他标题，关键字，作者等meta自行修改，body部分每个页面各自填充，但使用的框架统一。
2. CSS，我使用的是less来编写，所以需要编译成css，另外，编译过程，一些css属性需要自动添加浏览器前缀，例如border-radius，属性最好自动按照类型排序，一些css的编写细节自动帮我完成。同时，编译之后的css需要压缩，合并倒没什么所谓，因为css通常数量不多。
3. JS，这个我之前是jquery+seajs+underscore+backbone这个框架来编写前端模块化和实现MVC架构的，大的项目，小项目就直接jquery编写代码（介绍页面，下载页面之类）。不过经过我的最三考虑，我决定用requirejs替换seajs的作用，代码改动不大，原因主要是很多开源项目都是支持amd引用，要支持cmd引用需要增加几行源代码，可能seajs是国人编写，所以外国框架支持不多吧，另外觉得requirejs的依赖注入设计比较好，不过seajs还是很强啦。说回js的需求，最常用当然是压缩，另外是合并，第三才是检测语法。
4. 图片，图片素材基本就是适当压缩，如果UI设计师给的素材没压缩的话。
好了，前端我没有每个细节都列出来，但常用的需求就是上面那些，解决方案，
1. HTML，那块很容易解决，简单写个bin脚本，把模板HTML复制过来即可。
2. CSS，我使用grunt进行自动化构建，grunt-contrib-less这个模块，具体配置方法可参考官方网站，至于自动添加前缀，我使用了less-plugin-autoprefix这个模块，说到这个模板，有几点需要注意的，第一，less必须更新版本，我之前还在用1.7.0，后来升级到最新2.4.0才能生效，第二，配置autoprefix的浏览器范围是，官网例子是browsers: ["last 2 versions"]，这样子其实你是看不到效果的，因为那个配置的意思是，使用目前主流浏览器的最新2个版本的支持程度来决定要不要加前缀，所以我把配置改成较大的数字，需要支持最新的20个版本，哈~。第三，属性自动排序，这个我找到一个工具可以做这个事，但不是grunt的插件，是针对css的，不是针对less，叫csscomb，有Sublime Text编辑器插件版，但插件不能批量处理，所以建议使用nodejs接口去调用，批量处理。第四，压缩，这个简单，一个是grunt-contrib-less有个option参数，compress： true，另一个是使用grunt-contrib-cssmin这个模块。综合以上四个功能，构建顺序是，1.grunt-contrib-less编译less文件成css，2. less构建时添加plugins插件less-plugin-autoprefix，3.自定义任务去完成css属性自动排序这个功能，4. 压缩css，5. 有必要可以用grunt-contrib-concat这个模块合并文件。
3. js，压缩我使用grunt-contrib-uglify，虽然不是压缩得最多的，但grunt支持，压缩率还好啦，合并使用grunt-contrib-concat，检测使用grunt-contrib-jshint，编译coffee文件使用grunt-contrib-coffee，复制文件使用grunt-contrib-copy，不过由于使用了模块化，所以合并不能单纯把文件内容连接在一起，requirejs似乎提供了解决方案，自动根据引用的模块，合并js并压缩，下一篇文章我再说说这个，因为我还未看完实践。
4. 图片，没什么，用grunt-contrib-imagemin配置一下就行了。
大概前端自动化构建完成大半了，各位还有什么需求可以补充，我补充几点问题：
1. 自动化构建，平时一边开发我会一边监听文件变化，例如less变化重新编译，js重新压缩等，这个监听工具我使用grunt-contrib-watch模块，运行命令行grunt watch即可运行配置好的watch任务，上线前可以一次性grunt运行一次default任务。但有个坑爹的问题，就是增加一个新文件的时候，watch没有添加到监听列表，要重启才能监听到新文件，后来发现是文件路径，用相对当前路径才能监听到新文件，用绝对路径只能监听到运行时的文件。例如
watch:
app_js:
files: ["static/js/app/**/*.js"] // D:\code\xxx\static/js/app/**/*.js就不行
tasks: [‘uglify:app‘,‘jshint‘]
options:
spawn: false
interrupt: true
2. 请更新软件版本和模块版本来支持那些功能，今天还看了yeoman这个东西，其实就是分了三部分，yo负责生成模板代码，grunt负责构建，bower负责管理前端资源包，但模板毕竟是模板，不一定适合我项目的代码结构，而且他会安装一堆东西，所以我没用（同时安装yo是需要nodejs版本和npm版本更新的），grunt使用中，bower也没有使用，主要因为他只是做一个下载github项目整个代码的功能，而且固定下载到bower_components，对于前端调用和我的构建机制不方便，个人选择而已。
文章写得没什么条理，不过为了避免老了的时候，技术忘得七七八八的时候，发现自己曾经苦逼的努力，没有留下一点痕迹，所以~~记录一下当程序员时的苦逼研究啦，哈哈！