grunt入門講解3：實例講解使用 Gruntfile 配置任務

這個Gruntfile 實例使用到了5個 Grunt 插件：

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

上面的uglify，concat，watch這三個插件用的最多，第一個插件是用來壓縮文件的，第二個插件是用來合併文件的，第三個插件用來監聽文件內容的，若是文件內容改變了，就會觸發回調方法進行相應的處理。

咱們一步一步來說解這個 Gruntfile 實例。

首先是 "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配置對象的屬性，而且這個屬性名稱與任務名相同。所以"concat"任務就是咱們的配置對象中的"concat"屬性。下面即是個人"concat"任務的配置對象。

concat: {
　　options: {
　　　　// 定義一個用於插入合併輸出文件之間的字符
　　　　separator: ';'
　　},
　　dist: {
　　　　// 將要被合併的文件
　　　　src: ['src/**/*.js'],
　　　　// 合併後的JS文件的存放位置
　　　　dest: 'dist/<%= pkg.name %>.js'
　　}
}

這裏使用了pkg.name來訪問咱們剛纔引入並存儲在pkg屬性中的package.json文件信息，它會被解析爲一個JavaScript對象。Grunt自帶的有一個簡單的模板引擎用於輸出配置對象(這裏是指package.json中的配置對象)，這裏我讓concat任務將全部存在於src/目錄下以.js結尾的文件合併起來，而後存儲在dist目錄中，並以項目名來命名。

如今咱們來配置uglify插件，它的做用是壓縮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.js。

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']);

};

 

 

 

加油！