web開發利器之grunt

標籤：自動化測試   grunt   jscss壓縮 語法檢查   

伴隨著項目的多樣化和複雜化，前端的代碼維護和管理（打包、壓縮等等）也越來越難以維護，人為的疏忽往往會導致不可預期的錯誤，對於這樣的錯誤給我們帶來了很多的麻煩和多餘的工作量；對於前端的項目攜同開發來說，我們每個人均會負責不同板塊，將JS、CSS拆解成各自個的模組單獨開發，為了方便管理這些模組均為獨立的檔案，而為了頁面載入速度（增加了檔案個數這時也產生過多的Http請求，影響頁面載入速度）我們又不得不將這些檔案進行合并、壓縮等等，早期我們會用YUI做這些事但如今我們需要的卻更多（如項目的原始碼做單元測試和迴歸測試，以及JS文法自動化檢測等等）YUI開始無法滿足我們需求，這時grunt橫空出世，它眾多外掛程式和靈活性滿足了我們的需求，對於需要反覆重複的任務，例如壓縮、編譯、單元測試、代碼檢查等，輕而易舉完成，今天主要說下grun的用法。

grunt不難，它主要依賴的是nodeJS的npm包管理器，和一個JSON及一個JS檔案，先說說npm包管理器，玩過nodeJS的對它應該都很熟悉，在這裡我們只需要安裝nodeJS即可（新版的nodeJS基本都整合了npm），至於nodeJS的安裝可以點這裡，這這篇文章就不做詳細介紹，安裝完後開啟命令管理器（nodeJS安裝完後的終端）輸入：

npm install -g grunt-cli

在grunt中安裝全域命令介面；

然後說說JSON，確切的說應該是package.json，它主要用於安裝grunt依賴的外掛程式，和nodeJS的pakeage.json一樣，在執行npm install時，它就會作為主入口，npm通過這JSON中的devDependencies去安裝這些外掛程式，具體的關於package大家可以點擊這裡看看。

最後也就是最重要和最難的gruntfile.js了，它是用於配置和定義任務的一個主檔案，grunt運行任務介面主要就時依賴它了，它是由包含函數、任務配置、任務載入、自訂任務四部分組成，如下：

// 封裝函數module.exports = function(grunt) {  // 任務配置  grunt.initConfig({    pkg: grunt.file.readJSON(‘package.json‘),    uglify: {      build: {        src: ‘src/<%= pkg.name %>.js‘,        dest: ‘build/<%= pkg.name %>.min.js‘      }    }  });  // 任務載入  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  // 自訂任務  grunt.registerTask(‘default‘, [‘uglify‘]);};

其中封裝函數沒什麼好說的，它和backbone這樣的寫法差不多，主要用於定義一個輸出模組，在這個模組中處理grunt的相關事務；而任務配置大家可以看看這裡；任務載入則是載入你需要的外掛程式如concat、jshint、uglify（合并、檢測、壓縮）；自訂任務則是自訂grunt的執行命令；

具體的大家可以點擊這裡，把代碼clone到本地自己執行跑到看下，畢竟手動理解會比文字描述容易明白到多。好了今天寫到這裡吧，其實這篇文章描述多不是很多，給的更多是外鏈和自己git上的一個測試代碼，多動動手再去結合理解比光看不練的好，大家想深入看看可以看下grunt的官網，另外如果碰到什麼可以mail我大家交流。最後各位大大晚安