Grunt常見問題

一、nodeJs 環境安裝？
進入官網：http://www.nodejs.org/ 根據操做系統，下載相應的安裝包，直接安裝便可。

二、npm 安裝？
a) 若是系統沒有安裝過Git，能夠直接到https://github.com/isaacs/npm下載npm所須要的文件。
b) 若是有Git 可使用git下載。

git clone --recursive git://github.com/isaacs/npm.git

下載到NPM文件後，命令行首先轉到npm所在地址，輸入如下代碼進行安裝。

node cli.js install npm -gf 

三、grunt-cli安裝？

npm install grunt-cli -g

grunt-cli表示安裝的是grunt的命令行界面，參數g表示全局安裝。

 

四、package.json？

Grunt使用模塊結構，除了安裝命令行界面之外，還要根據須要安裝相應的模塊。這些模塊應該採用局部安裝，由於不一樣項目可能須要同一個模塊的不一樣版本。
首先，在項目的根目錄下，建立一個文本文件package.json，指定當前項目所需的模塊。下面就是一個例子。

{
  "name": "vdian",
  "version": "0.1.0",
  "author": "vdian",
  "devDependencies": {
    "grunt": "0.x.x",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.0",
    "grunt-contrib-watch": "~0.1.4"
  }
}

上面這個package.json文件中，除了註明項目的名稱和版本之外，還在devDependencies屬性中指定了項目依賴的grunt模塊和版本：grunt核心模塊爲最新的0.x.x版，jshint插件爲最新版本，concat插件不低於0.1.1版，uglify插件不低於0.1.0版，watch插件不低於0.1.4版。

而後，在項目的根目錄下運行下面的命令，這些插件就會被自動安裝在node_modules子目錄。

npm install

上面這種方法是針對已有package.json的狀況。若是想要自動生成package.json文件，可使用npm init命令，按照屏幕提示回答所需模塊的名稱和版本便可。

npm init

若是已有的package.json文件不包括Grunt模塊，能夠在直接安裝Grunt模塊的時候，加上--save-dev參數，該模塊就會自動被加入package.json文件。

npm install <module> --save-dev
好比，對應上面package.json文件指定的模塊，須要運行如下npm命令

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

五、命令腳本文件Gruntfile.js？

模塊安裝完之後，下一步在項目的根目錄下，新建腳本文件Gruntfile.js。它是grunt的配置文件，就好像package.json是npm的配置文件同樣。Gruntfile.js就是通常的Node.js模塊的寫法。

module.exports = function(grunt) {
  // 配置Grunt各類模塊的參數
  grunt.initConfig({
    jshint: { /* jshint的參數 */ },
    concat: { /* concat的參數 */ },
    uglify: { /* uglify的參數 */ },
    watch:  { /* watch的參數 */ }
  });
  // 從node_modules目錄加載模塊文件
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // 每行registerTask定義一個任務
  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
  grunt.registerTask('check', ['jshint']);
};

上面的代碼用到了grunt代碼的三個方法：

grunt.initConfig：定義各類模塊的參數，每個成員項對應一個同名模塊。

grunt.loadNpmTasks：加載完成任務所需的模塊。

grunt.registerTask：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組，表示該任務須要依次使用的模塊。default任務名錶示，若是直接輸入grunt命令，後面不跟任何參數，這時所調用的模塊（該例爲jshint，concat和uglify）；該例的check任務則表示使用jshint插件對代碼進行語法檢查。

上面的代碼一共加載了四個模塊：jshint（檢查語法錯誤）、concat（合併文件）、uglify（壓縮代碼）和watch（自動執行）。接下來，有兩種使用方法。

（1）命令行執行某個模塊，好比

grunt jshint

上面代碼表示運行jshint模塊。

（2）命令行執行某個任務。好比

grunt check

上面代碼表示運行check任務。若是運行成功，就會顯示「Done, without errors.」。

若是沒有給出任務名，只鍵入grunt，就表示執行默認的default任務。