Grunt個人學習

Grunt是一款受歡迎的Javascript代碼自動化構建工具。提供自動化的代碼檢測，編譯，壓縮等自動化構建功能。

首先需要安裝Grunt-CLI，安裝完成之後就可以使用grunt命令了。執行grunt命令式，會根據Gruntfile.js中配置的require()找到安裝的grunt(因此配置不同路徑可以找到不同版本的grunt)，加載grunt並傳入Gruntfile.js裏的配置信息。

那什麼是Gruntfile.js呢。Gruntfile.js主要負責grunt項目中的配置信息的設置，例如啓動參數，註冊任務等。Grunt項目還有另外一個重要的文件package.json，該文件是Json格式，配置許多版本信息，作者信息等。其中一個比較重要的是在devDependencies定義了項目要用到的依賴(任務)。基本任務一般有watch（當監測的文件發生變化時會順序執行你指定的任務），jshint（代碼檢測），clean，uglify（壓縮），concat（連接）。

一個完整的Gruntfile.js文件規定所有配置需寫在wrapper函數內。如下：

module.exports = function(grunt) {
}

然後通過讀取package.json文件讀取配置信息。例子如下：

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

之後就可以配置一些任務信息了。z這裏講一下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
    }
  }
}

files 定義了一個將要被檢測的數組，options配置了一些參數來控制檢測強度(js代碼規範比較寬鬆)，具體參數去官網看。

還可以通過grunt.registerTask()自定義自己的任務。例如：

// 只需在命令行上輸入"grunt"，就會執行default task
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

當輸入grunt的時候就會默認執行default任務，也就是執行jshint，qunit，concat，uglify。

最後我們需要在Gruntfile.js裏面添加Grunt插件：

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