Gruntfile 實(shí)例

Gruntfile 實(shí)例

下面就針對一個 Gruntfile 案例做簡單分析，也可以作為一個實(shí)例使用：

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 實(shí)例的完整內(nèi)容，如果你按順序閱讀本文的話，可以跟隨我們一步步分析這個文件中的每一部分。我們會用到以下5個 Grunt 插件：

• grunt-contrib-uglify
• grunt-contrib-qunit
• grunt-contrib-concat
• grunt-contrib-jshint
• grunt-contrib-watch

第一部分是"wrapper" 函數(shù)，它包含了整個Grunt配置信息。

module.exports = function(grunt) {
}

在這個函數(shù)中，我們可以初始化 configuration 對象：

grunt.initConfig({
});

接下來可以從package.json 文件讀入項目配置信息，并存入pkg 屬性內(nèi)。這樣就可以讓我們訪問到package.json文件中列出的屬性了，如下：

pkg: grunt.file.readJSON('package.json')

到目前為止我們就可以看到如下配置：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
};

現(xiàn)在我們就可以為我們的每個任務(wù)來定義相應(yīng)的配置(逐個定義我們?yōu)轫椖慷x的任務(wù)配置)，然后每個任務(wù)的配置對象作為Grunt配置對象(即grunt.initConfig({})所接受的配置對象)的屬性，并且這個屬性名稱與任務(wù)名相同。因此"concat"任務(wù)就是我們的配置對象中的"concat"鍵(屬性)。下面便是我的"concat"任務(wù)的配置對象。

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任務(wù)將所有存在于src/目錄下以.js結(jié)尾的文件合并起來，然后存儲在dist目錄中，并以項目名來命名。

現(xiàn)在我們來配置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/目錄中創(chuàng)建了一個包含壓縮結(jié)果的JavaScript文件。注意這里我使用了<%= concat.dist.dest>，因此uglify會自動壓縮concat任務(wù)中生成的文件。

QUnit插件的設(shè)置非常簡單。 你只需要給它提供用于測試運(yùn)行的文件的位置，注意這里的QUnit是運(yùn)行在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只需要一個文件數(shù)組(也就是你需要檢測的文件數(shù)組)， 然后是一個options對象(這個對象用于重寫JSHint提供的默認(rèn)檢測規(guī)則)。你可以到JSHint官方文檔站點(diǎn)中查看完整的文檔。如果你樂于使用JSHint提供的默認(rèn)配置，那么在Gruntfile中就不需要重新定義它們了.

最后，我們來看看watch插件：

watch: {
  files: ['<%= jshint.files %>'],
  tasks: ['jshint', 'qunit']
}

你可以在命令行使用grunt watch來運(yùn)行這個任務(wù)。當(dāng)它檢測到任何你所指定的文件(在這里我使用了JSHint任務(wù)中需要檢測的相同的文件)發(fā)生變化時，它就會按照你所指定的順序執(zhí)行指定的任務(wù)(在這里我指定了jshint和qunit任務(wù))。

最后, 我們還要加載所需要的Grunt插件。 它們應(yīng)該已經(jīng)全部通過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');

最后設(shè)置了一些task。最重要的是default任務(wù)：

// 在命令行上輸入"grunt test"，test task就會被執(zhí)行。
grunt.registerTask('test', ['jshint', 'qunit']);

// 只需在命令行上輸入"grunt"，就會執(zhí)行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默認(rèn)配置的選項
        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']);

};