grunt实现前端自动化构建

grunt入门请参考  grunt下载安装请参考   grunt中文网

项目开发环境需求描述：

1. tmodjs模版中的*.html实时编译成*.js、
2. 对项目中*.scss实时编译成*.css
3. 对项目中的组件*.js、模块js实现语法校验与代码规范校验

需求一：tmodjs模版中的*.html实时编译成*.js

需求二： 源代码下载

特别说明：tmodjs模版js及时编译疑问？？  初始化配置tmod对象如下图后，修改一个文件后  *.js  version 版本每次都会变化

 

需求二、对项目中*.scss实时编译成*.css;需要Runy、sass环境支持

安装Ruby后基于Ruby 安装sass   gem install sass 

需求一：源代码下载

需求三：对项目中的组件*.js、模块js实现语法校验与代码规范校验

说明：

watch监听文件修改后检测所有文件是否存在语法错误，符合代码规范；

若检测所有文件不存在js语法错误，则显示当前修改文件是否存在js语法错误、符合代码规范

否则显示被校验后所有存在js语法错误与不符合代码规范校验的js文件

需求三：源码下载

grunt-contrib-watch —— 作用是实现我们一开始需求的“自动化”！是最重要的一个插件之一！它会监听需要处理的文件的变动，一旦有变动就会自动执行相应处理。但是它有一个问题，就是每当监听到一处变动时，就会大费周章地把所有被监听的文件都处理一遍；

grunt-newer —— 作用是处理上方watch的毛病，让watch在监听到某个文件变动时，仅仅对变动的文件进行事务处理。

用newer处理watch毛病源代码下载

grunt自动构建优化

require('time-grunt') (grunt)   ——  加载插件、执行tasks所用时间

require('load-grunt-tasks')(grunt)  ——  加载插件

项目优化后的源代码下载

 

参考资料：

Grunt打造前端自动化工作流

前端见微知著工具篇：Grunt实现自动化

jshint更多参数配置详解 

英文网: http://jshint.com/docs/options/#nonstandard 

中文网: http://www.cnblogs.com/code/articles/4103070.html

监控模板修改即时编译 <1.*.html编译*js   2.编译语法是否正确 >