使用GruntJS建構Web程式之建構篇_javascript技巧

大概有以下步驟

    新專案 Bejs
    新檔案 package.json
    新檔案Gruntfile.js
    命令列執行grunt任務

js

   命令列執行grunt任務

js

   命令列執行grunt任務

js

   命令列執行grunt任務js

   命令列執行grunt任務

 一、新專案Bejs

原始碼放在src下，目錄有兩個js文件，selector.js和ajax.js。編譯後程式碼放在dest，這個grunt會自動產生。

二、新建package.json

package.json放在根目錄下，它包含了該項目的一些元信息，如項目名稱、描述、版本號，依賴包等。它應該和原始碼一樣被提交到svn或git。 現在的專案架構如下 package.json內容需符合JSON語法規範，如下

複製程式碼


程式碼如下:


{
"  "name"
  "version": "0.1.0",

  "devDependencies": {    "grunt": "0.4.0",

"    "grunt-contrib~0.4.0",

"    "grunt-contrib~0.4.0",

"    "grunt-contrib~0jsh. 1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"

  }

}

devDependencies中的grunt在前一篇已經安裝了，grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat則沒有安裝。三個分別對於三個任務（task）

    grunt-contrib-jshint js語法檢查

    grunt-contrib-uglify 壓縮，採用UglifyJS    grunt-contrib-concat 合併文件

此時，開啟命令列工具進入到專案根目錄，敲如下指令: npm install

再查看根目錄，發現多了個node_modules目錄，包含了四個子目錄，見圖

三、新檔案Gruntfile.js

Gruntfile.js也是放在專案根目錄下，幾乎所有的任務都定義在該檔案中，它就是一個普通的js文件，裡面可以寫任意js程式碼而不僅限於JSON。和package.json一樣它也要和原始碼一樣被提交到svn或git。 Gruntfile.js由以下組成

    wrapper函數，結構如下，這是Node.js的典型寫法，使用exports公開API

複製程式碼

程式碼如下:

module.exports = function(>

module.exports = function()(grmi)> // Do grunt-related things in here
};

   專案與任務設定

   載入grunt外掛程式與任務   客製化執行任務 此範例完成以下任務     合併src下的檔案（ajax.js/selector.js）為domop.js    壓縮domop.js為domop.min.js

     兩個檔案都放在dest目錄下 最終的Gruntfile.js如下 複製程式碼 程式碼如下:

module.exports = function(grunt) {
    // 設定
    grunt.initConfig({
   concat : {
            domop : {
                      dest: 'dest/domop.js'
            }
        },
        uglify : {
            ! */n'
            },
           🎜>                選擇 : 'dest/domop.min.js'
         }
    });
    // 載入concat和uglify插件，分別合併壓縮
    grunt.loadNpmTasks('grunt-contrib-concat');    // 註冊任務
    grunt.registerTask('default', ['concat', 'uglify']);
};




四、執行grunt任務

開啟命令列，進入到專案根目錄，敲 grunt

從列印訊息看出成功的合併和壓縮並產生了dest目錄及期望的文件，這時的專案目錄下多了dest，如下

ok，這裡介紹了2個常見任務concat和uglify，jshint等沒有介紹。 Gruntfile.js裡的程式碼也沒有一一解讀，有興趣的同學可在gruntjs的官方文件找到。