Grunt-幾個經常使用的任務配置，加載，執行的寫法

http://www.gruntjs.net/sample-gruntfile

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
• grunt-contrib-qunit
• grunt-contrib-concat
• grunt-contrib-jshint
• 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官方文檔站點中查看完整的文檔。若是你樂於使用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']); };

Found an error in the documentation? File an issue.