grunt實現前端自動化構建

grunt入門請參考  grunt下載安裝請參考   grunt中文網

項目開發環境需求描述：

1. tmodjs模版中的*.html實時編譯成*.js、
2. 對項目中*.scss實時編譯成*.css
3. 對項目中的組件*.js、模塊js實現語法校驗與代碼規範校驗

需求一：tmodjs模版中的*.html實時編譯成*.js

需求二： 源代碼下載

特別說明：tmodjs模版js及時編譯疑問？？  初始化配置tmod對象以下圖後，修改一個文件後  *.js  version 版本每次都會變化

 

需求2、對項目中*.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.編譯語法是否正確 >