閒話和grunt

　　一年半沒更新是由於本身轉崗了，android framework+system轉前端，能夠想象過程之苦逼，苦成了一首詩：很煩很煩/很是煩/很是很是十分煩/特別煩特煩/極其煩/賊煩/簡直煩死了/啊——。煩之餘秉承人醜多看書的古訓，啃書無數，成筆記百餘篇，不成體系。往往回想，老是忘卻了大多數，因而要整理一下，如趁還沒有排泄出去要反芻幾口，回味一下。

　　整理自是從近及遠整理，因此隨筆內容應該是由難到易，自顧自說，徹底不考慮旁觀人士。

　　開始。

　　最近在看grunt，說簡單點就是個前端管理工具，如maven、ant之於java。放在一年半前，我會說「前端工程還須要管理？」，在經歷了對QA無數次「JS沒更新、你Ctrl+F5刷新一下嘛」，對運營「又要壓縮？我一個一個文件壓縮很累的」，對PL「這文件夾下都100多個文件了，沒分類，還好多重構後廢棄的」以後，我終於感受到，前端仍是須要管理的。

　　grunt是什麼？是一個運行在node上的插件，因此要運行grunt先要把node的環境搭建好。

　　grunt能作什麼？合併，壓縮，混淆，編碼重命名，修改html中的引用，甚至於語法檢測、單元測試等等。

　　這樣說是沒有概念的，首先全局安裝grunt-cli

npm install -g grunt-cli

　　如今你就可使用grunt這個命令了，但這是米有意義的，由於grunt-cli的功能是調用當前目錄下的grunt模塊，自己不具有任何功能。也就是說grunt是局部安裝的，這樣不一樣的項目可使用不一樣版本的grunt。

　　好了，如今要新建一個文件夾，進入而後執行

npm init    //按指示生成package.json，若是單純測試grunt，這個文件是能夠缺失的
npm install grunt --save-dev    //安裝並保存依賴到package.json

　　再次執行grunt會提醒Gruntfile.js文件的缺失，這是grunt全部行爲的入口，因此要新建Gruntfile.js文件，這個文件的結構分爲4部分。

1. wrapper
   

   module.exports = function(grunt) {
     // 全部的代碼寫在這裏，注意傳入參數grunt
   };

    

2. 任務配置

   grunt.initConfig({
       concat: {},
       cssmin: {},
       uglify: {}
   });

    

3. 加載插件

   grunt.loadNpmTasks('grunt-contrib-concat');  //前提是使用npm install grunt-contrib-concat --save-dev
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-uglify');

   這個部分可被load-grunt-tasks替代，在wrapper第一行進行配置

   require('load-grunt-tasks')(grunt);    //速度較慢，一樣須要install

    

4. 自定義任務
   

   grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

   執行grunt時默認執行default任務，若是這個部分缺失，則須要使用下列命令分別執行第2部分中註冊的任務

   grunt concat
   grunt cssmin
   grunt uglify

    

以上是grunt的入門部分，官網相對更加詳盡，下一篇簡述下Gruntfile.js中task的配置規則。