前端自動化之利劍——Grunt

JavaScript的世界里一切皆模塊。

一切要從NodeJs說起，說起NodeJs就不得不說npm、Express，npm是NodeJs的包管理工具，Express是基于NodeJs的開發框架，一步步安裝完NodeJs后就已經安裝好npm了，然后你可以npm install -g express-generator來安裝最新版的Express4.x；這里不說Express了；來通過npm安裝Grunt，npm install -g grunt-cli全局安裝grunt命令行工具，要正式使用Grunt需要你的項目目錄下有package.json文件，如果你是Express項目骨架，就不要單獨弄個package.json了，只需要npm install grunt --dev在開發環境下安裝，由于grunt只是用來壓縮、合并、打包、自動化測試等的，一般上線不需要依賴它，所以--dev，當然--save也是可以的；如果你 的項目骨架里原本沒有package.json文件，當你安裝完node后只需進入項目根目錄，npm init就可以通過命令行一步步生成一個package.json,更簡單粗暴的方法就是，去Grunt官網下載package.json和Gruntfile到項目目錄下，慢慢修改……

好了，你可以開始Grunt了，新建一個Gruntfile.js文件；其實Gruntfile里的內容也大多格式差不多的；可能理解一個Grunt插件，就會了大部分了；

1、首先是個固定的外圍，用過Seajs、Require的就再熟悉不過了；

module.exports=function(grunt){//......}

2、Gruntfile.js里內置了一個簡單的模板引擎，可以很方便的來解析配置目錄結構；根據你的前端結構 來配置需要的資源目錄吧！比如小站的前端資源結構其中一部分是這樣的：

注意這里的命名是隨意的，只要你自己青春的知道什么意思，以及對應的資源目錄；因為我這里CSS是通過Sass來組織的，內部也是通過Sass造了很多CSS模塊，個人感覺還是挺爽的，后期有時間整理完整會很不錯的；JS部分是以Jquery作為基礎類庫，自己慢慢造了一堆模塊，通過Seajs組織到一起的，所以會有個jsModules目錄；

3、開始你想要的一鍵壓縮、合并、打包……開始安裝需要的Grunt插件并配置任務，監聽任務；

grunt.initConfig({
       config:config,
       //所有任務配置從這開始
       //比如實時監聽任務的watch
       //當然，首先你還是得安裝他：npm install grunt-contrib-watch --dev
       //這里先來監聽下mana和page目錄下Scss文件的修改，讓grunt來實時編譯并保存
       watch:{
              files:['<% config.sass.mana %>/*.scss','<% config.sass.page %>/*.scss'],
              task:sass,
              //任務指向了sass
              options:{
                     livereload:true
              }
              //更多配置項詳見grunt-contrib-watch github
       }，
       sass:{
              //配置sass任務
              //安裝grunt sass插件：npm install grunt-contrib-sass --dev
              //這里要特別注意，當你sass模塊的較細時，主文件里會有多個@import進來的模塊
              //一定要先配置loadPath項，比如：
              loadPath:[
                      '<%=config.pubFile%>/sass/common/vars.scss',
              '<%=config.pubFile%>/sass/common/reset.scss',
                  '<%=config.pubFile%>/sass/mixins/css3.scss'
              ],
              options:{
                      style:'compressed'
                      //編譯后的格式：nested是默認格式（嵌套縮進）、expanded是沒有縮進、擴展的格式、
                      //compact是簡潔版的、compressed是壓縮后的
               }，
               files:{                       '<%=config.css.mana%>/deleteArticals.css':'<%=config.sass.mana%>/deleteArticals.scss'
                      ……
        }
       }
});

4、還有很多配置任務，盡情百度github吧！JS的壓縮合并都可以用uglify

5、加載任務插件：

6、默認被執行的任務列表：

7、在此只是簡單的入門，更多精彩還需你去結合自己的項目情況，去安裝相應插件，配置相應任務；

8、自從有了Grunt，媽媽再也不用擔心我前端資源的壓縮、合并、打包什么的了；

9、如果你想在本地隨意的寫代碼，但又怕上線時資源錯亂，那么請使用Grunt吧，保證你在本地寫的任性，Grunt一鍵幫你整理的妥妥當當！只要你配置好Gruntfile.js就OK了！