摘要：為何選擇壓縮編譯單元測試代碼檢查等我們需要自動化，不必重復勞動，減小工作量。用于保存項目元數據。圖像壓縮模塊。監視文件變動，做出相應動作。

  
壓縮、編譯、單元測試、代碼檢查等 我們需要自動化，不必重復勞動，減小工作量。為何選擇Grunt呢？好像是沒有更好的選擇了。

  
Grunt基于Node.js，安裝之前要先安裝Node.js。

shellbrew install node  

shellsudo npm install npm -g

  
安裝 grunt-cli 并不等于安裝了 Grunt 任務運行器

  Grunt CLI 的任務是運行 Gruntfile 指定的 Grunt 版本。 這樣就可以在一臺電腦上同時安裝多個版本的 Grunt。(沒有懂，俺直接實戰)

shellnpm install -g grunt-cli

  
創建文件必須創建文件夾，我建立了一個 test 的文件夾，一個標準的 grunt 項目中必須有兩個文件。
  
  
package.json：用于保存項目元數據。

  Gruntfile.js : 用于配置或定義任務、加載 Grunt 插件。
  
  
在test1文件夾中創建這兩個文件吧。那么文件中寫什么內容呢。我們首先來關注一下package.json寫什么內容

json{
  "name": "test",
  "version": "1.0.0"
}

shellnpm install

lognpm WARN package.json test1@1.0.0 No description
npm WARN package.json test1@1.0.0 No repository field.
npm WARN package.json test1@1.0.0 No README data

  
提示說沒有描述信息沒有README之類的

  在根目錄添加一個 README.md 文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "測試的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  }
}

  
于是乎萬事大吉了

  
在此項目中安裝 Grunt 插件

shellsudo npm install grunt --save-dev

json{
  "name": "test",
  "version": "1.0.0",
  "description": "測試的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  },
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

  
插件用途：壓縮js,css文件

  插件名稱：grunt-contrib-uglify

shellsudo npm install grunt-contrib-uglify --save-dev

json  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.8.0"
  }

  
還記得我們上面說一個Grunt項目要兩個必須的文件一個 package.json 和Gruntfile.js，注意大小寫，Linux區分大小寫的，創建 Gruntfile.js 并寫入如下內容

js// 包裝函數
module.exports = function(grunt) {

  // 任務配置,所有插件的配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),

    // uglify插件的配置信息
    uglify: {
        options: {
          banner: "/*! This is uglify test - " +
            "<%= grunt.template.today("yyyy-mm-dd") %> */",
          beautify: true,//是否壓縮
          mangle: false, //不混淆變量名
          compress:true,//打開或關閉使用默認選項源壓縮。
        },
        app_task: {
          files: {
            "build/app.min.js": ["lib/index.js", "lib/test.js"]
          }
        }
    }
  });

  // 告訴grunt我們將使用插件
  grunt.loadNpmTasks("grunt-contrib-uglify");

  // 告訴grunt當我們在終端中輸入grunt時需要做些什么
  grunt.registerTask("default", ["uglify"]);

};

  
輸入命令下面命令，好了，我的沒有錯誤正常的。如果有錯誤，會有錯誤日志，自己分析哦。

shellgrunt

  
插件用途：監控文件變化并自動運行grunt的watch插件

  插件名稱：grunt-contrib-watch

shellsudo npm install grunt-contrib-watch --save-dev

  
修改 Gruntfile.js

js    // watch插件的配置信息
    watch: {
        another: {
            files: ["lib/*.js"],
            tasks: ["uglify"],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }

jsgrunt.loadNpmTasks("grunt-contrib-watch");

jsgrunt.registerTask("default", ["uglify","watch"]);

js// 包裝函數
module.exports = function(grunt) {

  // 任務配置,所有插件的配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),

    // uglify插件的配置信息
    uglify: {
        options: {
          banner: "/*! This is uglify test - " +
            "<%= grunt.template.today("yyyy-mm-dd") %> */"
        },
        app_task: {
          files: {
            "build/app.min.js": ["lib/index.js", "lib/test.js"]
          }
        }
    },


    // watch插件的配置信息
    watch: {
        another: {
            files: ["lib/*.js"],
            tasks: ["uglify"],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }


  });

  // 告訴grunt我們將使用插件
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-watch");

  // 告訴grunt當我們在終端中輸入grunt時需要做些什么
  grunt.registerTask("default", ["uglify","watch"]);

};

shellsudo npm install grunt-contrib-watch --save-dev

jsstylus:{
    build: {
        options: {
            linenos: false,
            compress: false,
            banner: "/** 
 * <%= pkg.name %> - <%= pkg.description %>
 * version <%= pkg.version %> 
 * author <%= pkg.author %> 
 * date <%= grunt.template.today() %> 
**/
"
        },
        files: [{
            "css/historyDetail.css": "styl/historyDetail.styl"
        }]
    }
},

js    grunt.loadNpmTasks("grunt-contrib-stylus");

banner: "/** 
 * <%= pkg.name %> - <%= pkg.description %>
 * version <%= pkg.version %> 
 * author <%= pkg.author %> 
 * date <%= grunt.template.today() %> 
**/
"