grunt安裝

Grunt和 Grunt 插件是經過 npm 安裝並管理的，npm是 Node.js 的包管理器。

先下載安裝node.js

如下指令：mac os 系統、部分linux系統中，在這句話的前面加上「sudo 」指令

安裝grunt-cli

npm install -g grunt-cli

上述命令執行完後，grunt 命令就被加入到你的系統路徑中了，之後就能夠在任何目錄下執行此命令了。

注意，安裝grunt-cli並不等於安裝了 Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，容許你在同一個系統上同時安裝多個版本的 Grunt。

這樣就能讓多個版本的 Grunt 同時安裝在同一臺機器上。

建立一個項目

 

package.json: 此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。你能夠在此文件中列出項目依賴的grunt和Grunt插件，放置於devDependencies配置段內。

Gruntfile: 此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的。 此文檔中提到的 Gruntfile 其實說的是一個文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

複製如下到package.json

{
  "name": "my-project-name", "version": "0.1.0", "devDependencies": {  } }

切換到當前項目文件夾

安裝grunt

npm install grunt --save-dev

• Contrib-jshint——javascript語法錯誤檢查；

• Contrib-watch——實時監控文件變化、調用相應的任務從新執行；

• Contrib-clean——清空文件、文件夾；

• Contrib-uglify——壓縮javascript代碼

• Contrib-copy——複製文件、文件夾

• Contrib-concat——合併多個文件的代碼到一個文件中

• karma——前端自動化測試工具

安裝grunt的js壓縮插件

npm install grunt-contrib-uglify --save-dev

配置Gruntfile.js

Gruntfile.js

module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // 加載包含 "uglify" 任務的插件。 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默認被執行的任務列表。 grunt.registerTask('default', ['uglify']); };

執行壓縮
命令行：grunt

安裝語法檢查插件jshint

npm install grunt-contrib-jshint --save-dev

配置Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //js壓縮
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %>-<%= pkg.version %>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/jquery.dtGrid.js',
        dest: 'build/<%= pkg.name %>-<%= pkg.version %>.min.js'
      }
    },
    //js語法檢查，有語法錯誤後不會壓縮，在根目錄建立.jshintrc文件
    jshint:{
       build:['Gruntfile.js','src/*.js'],
       options:{
          jshintrc:'.jshintrc'
       }
    }


  });

  // 加載包含 "uglify" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 默認被執行的任務列表。
  //前後加載順序，先檢查後壓縮，檢查到錯誤不壓縮
  grunt.registerTask('default', ['jshint','uglify']);

};


jshint配置Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //js壓縮
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %>-<%= pkg.version %>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/jquery.dtGrid.js',
        dest: 'build/<%= pkg.name %>-<%= pkg.version %>.min.js'
      }
    },
    //js語法檢查，有語法錯誤後不會壓縮，在根目錄建立.jshintrc文件
    jshint:{
       build:['Gruntfile.js','src/*.js'],
       options:{
          jshintrc:'.jshintrc'
       }
    }


  });

  // 加載包含 "uglify" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 默認被執行的任務列表。
  //前後加載順序，先檢查後壓縮，檢查到錯誤不壓縮
  grunt.registerTask('default', ['jshint','uglify']);

};
Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //js壓縮
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %>-<%= pkg.version %>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/jquery.dtGrid.js',
        dest: 'build/<%= pkg.name %>-<%= pkg.version %>.min.js'
      }
    },
    //js語法檢查，有語法錯誤後不會壓縮，在根目錄建立.jshintrc文件
    jshint:{
       build:['Gruntfile.js','src/*.js'],
       options:{
          jshintrc:'.jshintrc'
       }
    }


  });

  // 加載包含 "uglify" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 默認被執行的任務列表。
  //前後加載順序，先檢查後壓縮，檢查到錯誤不壓縮
  grunt.registerTask('default', ['jshint','uglify']);

};
.jshintrc.jshintrc.jshintrc

自定義任務

經過定義 default 任務，能夠讓Grunt默認執行一個或多個任務。在下面的這個案例中，執行 grunt 命令時若是不指定一個任務的話，將會執行uglify任務。這和執行grunt uglify 或者 grunt default的效果同樣。default任務列表數組中能夠指定任意數目的任務（能夠帶參數）。

// Default task(s). grunt.registerTask('default', ['uglify']);

文件包括一些檢查的配置（json格式）

{
    "bitwise": true,
    "camelcase": true,
    "curly": true,
    "eqeqeq": true,
    "es3": false,
    "forin": true,
    "freeze": true,
    "immed": true,
    "indent": 4,
    "latedef": "nofunc",
    "newcap": true,
    "noarg": true,
    "noempty": true,
    "nonbsp": true,
    "nonew": true,
    "plusplus": false,
    "quotmark": "single",
    "undef": true,
    "unused": false,
    "strict": false,
    "maxparams": 10,
    "maxdepth": 5,
    "maxstatements": 40,
    "maxcomplexity": 8,
    "maxlen": 120,

    "asi": false,
    "boss": false,
    "debug": false,
    "eqnull": true,
    "esnext": false,
    "evil": false,
    "expr": false,
    "funcscope": false,
    "globalstrict": false,
    "iterator": false,
    "lastsemic": false,
    "laxbreak": false,
    "laxcomma": false,
    "loopfunc": true,
    "maxerr": false,
    "moz": false,
    "multistr": false,
    "notypeof": false,
    "proto": false,
    "scripturl": false,
    "shadow": false,
    "sub": true,
    "supernew": false,
    "validthis": false,
    "noyield": false,

    "browser": true,
    "node": true,

    "globals": {
        "angular": false,
        "$": false
    }
}

.jshintrc.jshintrc.jshintrc.jshintrc.jshintrc.jshintrc

命令行執行grunt其餘插件安裝相似，具體可參考各個插件的 github 項目