轉：Grunt：任務自動管理工具

Grunt：任務自動管理工具

來自《JavaScript 標準參考教程（alpha）》，by 阮一峰

目錄

• 安裝
• 命令指令碼檔案Gruntfile.js
• Gruntfile.js例項：grunt-contrib-cssmin模組
• 常用模組設定
• grunt-contrib-jshint
• grunt-contrib-concat
• grunt-contrib-uglify
• grunt-contrib-copy
• grunt-contrib-watch
• 其他模組
• 參考連結

在Javascript的開發過程中，經常會遇到一些重複性的任務，比如合併檔案、壓縮程式碼、檢查語法錯誤、將Sass程式碼轉成CSS程式碼等等。通常，我們需要使用不同的工具，來完成不同的任務，既重複勞動又非常耗時。Grunt就是為了解決這個問題而發明的工具，可以幫助我們自動管理和執行各種任務。

簡單說，Grunt是一個自動任務執行器，會按照預先設定的順序自動執行一系列的任務。這可以簡化工作流程，減輕重複性工作帶來的負擔。

安裝

Grunt基於Node.js，安裝之前要先安裝Node.js，然後執行下面的命令。

sudo npm install grunt-cli -g

grunt-cli表示安裝的是grunt的命令列介面，引數g表示全域性安裝。

Grunt使用模組結構，除了安裝命令列介面以外，還要根據需要安裝相應的模組。這些模組應該採用區域性安裝，因為不同專案可能需要同一個模組的不同版本。

首先，在專案的根目錄下，建立一個文字檔案package.json，指定當前專案所需的模組。下面就是一個例子。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "0.x.x",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.0",
    "grunt-contrib-watch": "~0.1.4"
  }
}

上面這個package.json檔案中，除了註明專案的名稱和版本以外，還在devDependencies屬性中指定了專案依賴的grunt模組和版本：grunt核心模組為最新的0.x.x版，jshint外掛為最新版本，concat外掛不低於0.1.1版，uglify外掛不低於0.1.0版，watch外掛不低於0.1.4版。

然後，在專案的根目錄下執行下面的命令，這些外掛就會被自動安裝在node_modules子目錄。

npm install

上面這種方法是針對已有package.json的情況。如果想要自動生成package.json檔案，可以使用npm init命令，按照螢幕提示回答所需模組的名稱和版本即可。

npm init

如果已有的package.json檔案不包括Grunt模組，可以在直接安裝Grunt模組的時候，加上--save-dev引數，該模組就會自動被加入package.json檔案。

npm install <module> --save-dev

比如，對應上面package.json檔案指定的模組，需要執行以下npm命令。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

命令指令碼檔案Gruntfile.js

模組安裝完以後，下一步在專案的根目錄下，新建指令碼檔案Gruntfile.js。它是grunt的配置檔案，就好像package.json是npm的配置檔案一樣。Gruntfile.js就是一般的Node.js模組的寫法。

module.exports = function(grunt) {

  // 配置Grunt各種模組的引數
  grunt.initConfig({
    jshint: { /* jshint的引數 */ },
    concat: { /* concat的引數 */ },
    uglify: { /* uglify的引數 */ },
    watch:  { /* watch的引數 */ }
  });

  // 從node_modules目錄載入模組檔案
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 每行registerTask定義一個任務
  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
  grunt.registerTask('check', ['jshint']);

};

上面的程式碼用到了grunt程式碼的三個方法：

• grunt.initConfig：定義各種模組的引數，每一個成員項對應一個同名模組。

• grunt.loadNpmTasks：載入完成任務所需的模組。

• grunt.registerTask：定義具體的任務。第一個引數為任務名，第二個引數是一個陣列，表示該任務需要依次使用的模組。default任務名錶示，如果直接輸入grunt命令，後面不跟任何引數，這時所呼叫的模組（該例為jshint，concat和uglify）；該例的check任務則表示使用jshint外掛對程式碼進行語法檢查。

上面的程式碼一共載入了四個模組：jshint（檢查語法錯誤）、concat（合併檔案）、uglify（壓縮程式碼）和watch（自動執行）。接下來，有兩種使用方法。

（1）命令列執行某個模組，比如

grunt jshint

上面程式碼表示執行jshint模組。

（2）命令列執行某個任務。比如

grunt check

上面程式碼表示執行check任務。如果執行成功，就會顯示“Done, without errors.”。

如果沒有給出任務名，只鍵入grunt，就表示執行預設的default任務。

Gruntfile.js例項：grunt-contrib-cssmin模組

下面通過cssmin模組，演示如何編寫Gruntfile.js檔案。cssmin模組的作用是最小化CSS檔案。

首先，在專案的根目錄下安裝該模組。

npm install grunt-contrib-cssmin --save-dev

然後，新建檔案Gruntfile.js。

module.exports = function(grunt) {

  grunt.initConfig({
    cssmin: {
      minify: {
        expand: true,
        cwd: 'css/',
        src: ['*.css', '!*.min.css'],
        dest: 'css/',
        ext: '.min.css'
      },
      combine: {
        files: {
          'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
        }
      }
    }
  });

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

  grunt.registerTask('default', ['cssmin:minify','cssmin:combine']);

};

下面詳細解釋上面程式碼中的三個方法，下面一個個來看。

（1）grunt.loadNpmTasks

grunt.loadNpmTasks方法載入模組檔案。

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

你需要使用幾個模組，這裡就要寫幾條grunt.loadNpmTasks語句，將各個模組一一載入。

如果載入模組很多，這部分會非常冗長。而且，還存在一個問題，就是凡是在這裡載入的模組，也同時出現在package.json檔案中。如果使用npm命令解除安裝模組以後，模組會自動從package.json檔案中消失，但是必須手動從Gruntfile.js檔案中清除，這樣很不方便，一旦忘記，還會出現執行錯誤。這裡有一個解決辦法，就是安裝load-grunt-tasks模組，然後在Gruntfile.js檔案中，用下面的語句替代所有的grunt.loadNpmTasks語句。

require('load-grunt-tasks')(grunt);

這條語句的作用是自動分析package.json檔案，自動載入所找到的grunt模組。

（2）grunt.initConfig

grunt.initConfig方法用於模組配置，它接受一個物件作為引數。該物件的成員與使用的同名模組一一對應。由於我們要配置的是cssmin模組，所以裡面有一個cssmin成員（屬性）。

cssmin（屬性）指向一個物件，該物件又包含多個成員。除了一些系統設定的成員（比如options），其他自定義的成員稱為目標（target）。一個模組可以有多個目標（target），上面程式碼裡面，cssmin模組共有兩個目標，一個是“minify”，用於壓縮css檔案；另一個是“combine”，用於將多個css檔案合併一個檔案。

每個目標的具體設定，需要參考該模板的文件。就cssmin來講，minify目標的引數具體含義如下：

• expand：如果設為true，就表示下面檔名的佔位符（即*號）都要擴充套件成具體的檔名。

• cwd：需要處理的檔案（input）所在的目錄。

• src：表示需要處理的檔案。如果採用陣列形式，陣列的每一項就是一個檔名，可以使用萬用字元。

• dest：表示處理後的檔名或所在目錄。

• ext：表示處理後的檔案字尾名。

除了上面這些引數，還有一些引數也是grunt所有模組通用的。

• filter：一個返回布林值的函式，用於過濾檔名。只有返回值為true的檔案，才會被grunt處理。

• dot：是否匹配以點號（.）開頭的系統檔案。

• makeBase：如果設定為true，就只匹配檔案路徑的最後一部分。比如，a?b可以匹配/xyz/123/acb，而不匹配/xyz/acb/123。

關於萬用字元，含義如下：

• *：匹配任意數量的字元，不包括/。
• ?：匹配單個字元，不包括/。
• **：匹配任意數量的字元，包括/。
• {}：允許使用逗號分隔的列表，表示“or”（或）關係。
• !：用於模式的開頭，表示只返回不匹配的情況。

比如，foo/*.js匹配foo目錄下面的檔名以.js結尾的檔案，foo/**/*.js匹配foo目錄和它的所有子目錄下面的檔名以.js結尾的檔案，!*.css表示匹配所有字尾名不為“.css”的檔案。

使用萬用字元設定src屬性的更多例子：

{src: 'foo/th*.js'}grunt-contrib-uglify

{src: 'foo/{a,b}*.js'}

{src: ['foo/a*.js', 'foo/b*.js']}

至於combine目標，就只有一個files引數，表示輸出檔案是css子目錄下的out.min.css，輸入檔案則是css子目錄下的part1.min.css和part2.min.css。

files引數的格式可以是一個物件，也可以是一個陣列。

files: {
        'dest/b.js': ['src/bb.js', 'src/bbb.js'],
        'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
},

// or

files: [
        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
],

如果minify目標和combine目標的屬性設定有重合的部分，可以另行定義一個與minify和combine平行的options屬性。

grunt.initConfig({
    cssmin: {
      options: { /* ... */ },
      minify: { /* ... */ },
      combine: { /* ... */ }
    }
  });

（3）grunt.registerTask

grunt.registerTask方法定義如何呼叫具體的任務。“default”任務表示如果不提供引數，直接輸入grunt命令，則先執行“cssmin:minify”，後執行“cssmin:combine”，即先壓縮再合併。如果只執行壓縮，或者只執行合併，則需要在grunt命令後面指明“模組名:目標名”。

grunt # 預設情況下，先壓縮後合併

grunt cssmin:minify # 只壓縮不合並

grunt css:combine # 只合並不壓縮

如果不指明目標，只是指明模組，就表示將所有目標依次執行一遍。

grunt cssmin

常用模組設定

grunt的模組已經超過了2000個，且還在快速增加。下面是一些常用的模組（按字母排序）。

• grunt-contrib-clean：刪除檔案。
• grunt-contrib-compass：使用compass編譯sass檔案。
• grunt-contrib-concat：合併檔案。
• grunt-contrib-copy：複製檔案。
• grunt-contrib-cssmin：壓縮以及合併CSS檔案。
• grunt-contrib-imagemin：影像壓縮模組。
• grunt-contrib-jshint：檢查JavaScript語法。
• grunt-contrib-uglify：壓縮以及合併JavaScript檔案。
• grunt-contrib-watch：監視檔案變動，做出相應動作。

模組的字首如果是grunt-contrib，就表示該模組由grunt開發團隊維護；如果字首是grunt（比如grunt-pakmanager），就表示由第三方開發者維護。

以下選幾個模組，看看它們配置引數的寫法，也就是說如何在grunt.initConfig方法中配置各個模組。

grunt-contrib-jshint

jshint用來檢查語法錯誤，比如分號的使用是否正確、有沒有忘記寫括號等等。它在grunt.initConfig方法裡面的配置程式碼如下。

jshint: {
    options: {
        eqeqeq: true,
        trailing: true
    },
    files: ['Gruntfile.js', 'lib/**/*.js']
},

上面程式碼先指定jshint的檢查專案，eqeqeq表示要用嚴格相等運算子取代相等運算子，trailing表示行尾不得有多餘的空格。然後，指定files屬性，表示檢查目標是Gruntfile.js檔案，以及lib目錄的所有子目錄下面的JavaScript檔案。

grunt-contrib-concat

concat用來合併同類檔案，它不僅可以合併JavaScript檔案，還可以合併CSS檔案。

concat: {
  js: {
    src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],
    dest: 'dist/script.js'
  }
  css: {
    src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],
    dest: 'dist/screen.css'
  }
},

js目標用於合併JavaScript檔案，css目標用語合併CSS檔案。兩者的src屬性指定需要合併的檔案（input），dest屬性指定輸出的目標檔案（output）。

grunt-contrib-uglify

uglify模組用來壓縮程式碼，減小檔案體積。

uglify: {
  options: {
    banner: bannerContent,
    sourceMapRoot: '../',
    sourceMap: 'distrib/'+name+'.min.js.map',
    sourceMapUrl: name+'.min.js.map'
  },
  target : {
    expand: true,
    cwd: 'js/origin',
    src : '*.js',
    dest : 'js/'
  }
},

上面程式碼中的options屬性指定壓縮後檔案的檔案頭，以及sourceMap設定；target目標指定輸入和輸出檔案。

grunt-contrib-copy

copy模組用於複製檔案與目錄。

copy: {
  main: {
    src: 'src/*',
    dest: 'dest/',
  },
},

上面程式碼將src子目錄（只包含它下面的第一層檔案和子目錄），拷貝到dest子目錄下面（即dest/src目錄）。如果要更準確控制拷貝行為，比如只拷貝檔案、不拷貝目錄、不保持目錄結構，可以寫成下面這樣：

copy: {
  main: {
    expand: true,
    cwd: 'src/',
    src: '**',
    dest: 'dest/',
    flatten: true,
    filter: 'isFile',
  },
},

grunt-contrib-watch

watch模組用來在後臺執行，監聽指定事件，然後自動執行指定的任務。

watch: {
   scripts: {
    files: '**/*.js',
    tasks: 'jshint',
    options: {
      livereload: true,
    },
   },
   css: {
    files: '**/*.sass',
    tasks: ['sass'],
    options: {
      livereload: true,
    },
   },
},

設定好上面的程式碼，開啟另一個程式，執行grunt watch。此後，任何的js程式碼變動，檔案儲存後就會自動執行jshint任務；任何sass檔案變動，檔案儲存後就會自動執行sass任務。

需要注意的是，這兩個任務的options引數之中，都設定了livereload，表示任務執行結束後，自動在瀏覽器中過載（reload）。這需要在瀏覽器中安裝livereload外掛。安裝後，livereload的預設埠為localhost:35729，但是也可以用livereload: 1337的形式重設埠（localhost:1337）。

其他模組

下面是另外一些有用的模組。

（1）grunt-contrib-clean

該模組用於刪除檔案或目錄。

clean: {
  build: {
    src: ["path/to/dir/one", "path/to/dir/two"]
  }
}

（2）grunt-autoprefixer

該模組用於為CSS語句加上瀏覽器字首。

autoprefixer: {
  build: {
    expand: true,
    cwd: 'build',
    src: [ '**/*.css' ],
    dest: 'build'
  }
},

（3）grunt-contrib-connect

該模組用於在本機執行一個Web Server。

connect: {
  server: {
    options: {
      port: 4000,
      base: 'build',
      hostname: '*'
    }
  }
}

connect模組會隨著grunt執行結束而結束，為了使它一直處於執行狀態，可以把它放在watch模組之前執行。因為watch模組需要手動中止，所以connect模組也就會一直執行。

（4）grunt-htmlhint

該模組用於檢查HTML語法。

htmlhint: {
    build: {
        options: {
            'tag-pair': true,
            'tagname-lowercase': true,
            'attr-lowercase': true,
            'attr-value-double-quotes': true,
            'spec-char-escape': true,
            'id-unique': true,
            'head-script-disabled': true,
        },
        src: ['index.html']
    }
}

上面程式碼用於檢查index.html檔案：HTML標記是否配對、標記名和屬性名是否小寫、屬性值是否包括在雙引號之中、特殊字元是否轉義、HTML元素的id屬性是否為唯一值、head部分是否沒有script標記。

（5）grunt-contrib-sass模組

該模組用於將SASS檔案轉為CSS檔案。

sass: {
    build: {
        options: {
            style: 'compressed'
        },
        files: {
            'build/css/master.css': 'assets/sass/master.scss'
        }
    }
}

上面程式碼指定輸出檔案為build/css/master.css，輸入檔案為assets/sass/master.scss。

（6）grunt-markdown

該模組用於將markdown文件轉為HTML文件。

markdown: {
    all: {
      files: [
        {
          expand: true,
          src: '*.md',
          dest: 'docs/html/',
          ext: '.html'
        }
      ],
      options: {
        template: 'templates/index.html',
      }
    }
},

上面程式碼指定將md字尾名的檔案，轉為docs/html/目錄下的html檔案。template屬性指定轉換時採用的模板，模板樣式如下。

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
 
    <div id="main" class="container">
        <%=content%>
    </div>
 
</body>
</html>