# Gruntfile 實例
下面就針對一個?`Gruntfile`?案例做簡單分析，也可以作為一個實例使用：
~~~
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
~~~
在頁面底部是這個?`Gruntfile`?實例的完整內容，如果你按順序閱讀本文的話，可以跟隨我們一步步分析這個文件中的每一部分。我們會用到以下5個 Grunt 插件：
* [grunt-contrib-uglify](https://github.com/gruntjs/grunt-contrib-uglify)
* [grunt-contrib-qunit](https://github.com/gruntjs/grunt-contrib-qunit)
* [grunt-contrib-concat](https://github.com/gruntjs/grunt-contrib-concat)
* [grunt-contrib-jshint](https://github.com/gruntjs/grunt-contrib-jshint)
* [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch)
第一部分是"wrapper" 函數，它包含了整個Grunt配置信息。
~~~
module.exports = function(grunt) {
}
~~~
在這個函數中，我們可以初始化 configuration 對象：
~~~
grunt.initConfig({
});
~~~
接下來可以從`package.json`?文件讀入項目配置信息，并存入`pkg`?屬性內。這樣就可以讓我們訪問到`package.json`文件中列出的屬性了，如下：
~~~
pkg: grunt.file.readJSON('package.json')
~~~
到目前為止我們就可以看到如下配置：
~~~
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
};
~~~
現在我們就可以為我們的每個任務來定義相應的配置(逐個定義我們為項目定義的任務配置)，然后每個任務的配置對象作為Grunt配置對象(即grunt.initConfig({})所接受的配置對象)的屬性，并且這個屬性名稱與任務名相同。因此"concat"任務就是我們的配置對象中的"concat"鍵(屬性)。下面便是我的"concat"任務的配置對象。
~~~
concat: {
options: {
// 定義一個用于插入合并輸出文件之間的字符
separator: ';'
},
dist: {
// 將要被合并的文件
src: ['src/**/*.js'],
// 合并后的JS文件的存放位置
dest: 'dist/<%= pkg.name %>.js'
}
}
~~~
注意我是如何引用JSON文件(也就是我們在配置對象頂部引入的配置文件)中的`name`屬性的。這里我使用`pkg.name`來訪問我們剛才引入并存儲在`pkg`屬性中的`package.json`文件信息，它會被解析為一個JavaScript對象。Grunt自帶的有一個簡單的模板引擎用于輸出配置對象(這里是指`package.json`中的配置對象)屬性值，這里我讓`concat`任務將所有存在于`src/`目錄下以`.js`結尾的文件合并起來，然后存儲在`dist`目錄中，并以項目名來命名。
現在我們來配置uglify插件，它的作用是壓縮（minify）JavaScript文件：
~~~
uglify: {
options: {
// 此處定義的banner注釋將插入到輸出文件的頂部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
~~~
這里我們讓`uglify`在`dist/`目錄中創建了一個包含壓縮結果的JavaScript文件。注意這里我使用了`<%= concat.dist.dest>`，因此uglify會自動壓縮concat任務中生成的文件。
QUnit插件的設置非常簡單。 你只需要給它提供用于測試運行的文件的位置，注意這里的QUnit是運行在HTML文件上的。
~~~
qunit: {
files: ['test/**/*.html']
},
~~~
JSHint插件的配置也很簡單：
~~~
jshint: {
// define the files to lint
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
// configure JSHint (documented at http://www.jshint.com/docs/)
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true
}
}
}
~~~
JSHint只需要一個文件數組(也就是你需要檢測的文件數組)， 然后是一個`options`對象(這個對象用于重寫JSHint提供的默認檢測規則)。你可以到[JSHint官方文檔](http://www.jshint.com/docs/)站點中查看完整的文檔。如果你樂于使用JSHint提供的默認配置，那么在Gruntfile中就不需要重新定義它們了.
最后，我們來看看watch插件：
~~~
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
~~~
你可以在命令行使用`grunt watch`來運行這個任務。當它檢測到任何你所指定的文件(在這里我使用了JSHint任務中需要檢測的相同的文件)發生變化時，它就會按照你所指定的順序執行指定的任務(在這里我指定了jshint和qunit任務)。
最后, 我們還要加載所需要的Grunt插件。 它們應該已經全部通過npm安裝好了。
~~~
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
~~~
最后設置了一些task。最重要的是default任務：
~~~
// 在命令行上輸入"grunt test"，test task就會被執行。
grunt.registerTask('test', ['jshint', 'qunit']);
// 只需在命令行上輸入"grunt"，就會執行default task
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
~~~
下面便是最終完成的?`Gruntfile`?文件：
~~~
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
//這里是覆蓋JSHint默認配置的選項
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};
~~~
