Grunt使用初步

1.快速入門

1）Grunt Cli

要在命令行中使用grunt，必須先將grunt-cli先安裝到全局環境中：
npm install -g grunt-cli
（要使用npm，請先安裝node，如未安裝，請自行安裝）

grunt-cli工作原理

每次運行grunt 時，他就利用node提供的require()系統查找本地安裝的 Grunt。正是由於這一機制，你可以在項目的任意子目錄中運行grunt 。
如果找到一份本地安裝的 Grunt，CLI就將其加載，並傳遞Gruntfile中的配置信息，然後執行你所指定的任務。爲了更好的理解 Grunt CLI的執行原理，請閱讀源碼。*

2）Gruntfile

Gruntfile有以下幾部分構成:

• “wrapper” 函數
• 項目與任務配置
• 加載grunt插件和任務
• 自定義任務

wrapper函數

module.exports = function(grunt) {
  // Do grunt-related things in here
};

項目和任務配置

大部分的Grunt任務都依賴某些配置數據，這些數據被定義在一個object內，並傳遞給grunt.initConfig 方法。一般是獲取通過package.json獲取依賴

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

加載 Grunt 插件和任務

// 加載能夠提供"uglify"任務的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');

自定義任務

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

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

2.配置任務

1.Grunt配置

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的。此配置主要是以任務名稱命名的屬性，也可以包含其他任意數據。

grunt.initConfig({
  concat: {
    // 這裏是concat任務的配置信息。
  },
  uglify: {
    // 這裏是uglify任務的配置信息
  },
  // 任意數據。
  my_property: 'whatever',
  my_src_files: ['foo/*.js', 'bar/*.js'],
});

2.任務配置和目標

當運行一個任務時，Grunt會自動查找配置對象中的同名屬性。多任務（multi-task）可以通過任意命名的“目標（target）”來定義多個配置。在下面的案例中，concat任務有名爲foo和bar兩個目標，而uglify任務僅僅只有一個名爲bar目標。

grunt.initConfig({
  concat: {
    foo: {
      // concat task "foo" target options and files go here.
    },
    bar: {
      // concat task "bar" target options and files go here.
    },
  },
  uglify: {
    bar: {
      // uglify task "bar" target options and files go here.
    },
  },
});

options屬性

在一個任務配置中，options屬性可以用來指定覆蓋內置屬性的默認值。此外，每一個目標（target）中還可以擁有一個專門針對此目標（target）的options屬性。目標（target）級的平options將會覆蓋任務級的options。

grunt.initConfig({
  concat: {
    options: {
      // 這裏是任務級的Options，覆蓋默認值 
    },
    foo: {
      options: {
        // "foo" target options may go here, overriding task-level options.
      },
    },
    bar: {
      // No options specified; this target will use task-level options.
    },
  },
});

文件

Grunt有一個強大的抽象層用於聲明任務應該操作哪些文件,這個抽象層有好幾種定義src-dest(源文件-目標文件)文件映射的方式，均提供了不同程度的描述和控制操作方式。 文件映射方式有：

• 簡潔格式；
• 文件對象格式；
• 文件數組格式；
• 較老的格式。
  所有的文件格式都支持src和dest屬性，此外，簡潔格式和文件數組格式還支持一下屬性：
  fileter,nonull,dot,matchBase,expand
  其他的屬性將作爲匹配項傳遞給底層的庫。

簡潔格式

這種形式允許每個目標對應一個src-dest文件映射。支持給每個src-dest文件映射指定額外的屬性。

bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },

文件對象格式

這種形式支持每個目標對應多個src-dest形式的文件映射，屬性名就是目標文件，源文件就是它的值(源文件列表則使用數組格式聲明)。不能夠給每個映射指定附加的屬性。

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

文件數組格式

這種形式支持每個目標對應多個src-dest文件映射，同時也允許每個映射擁有額外屬性

bar: {
      files: [
        {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
      ],
    },

過濾器filter

只需要使用一個有效的fs.Stats 方法名，或者創建自己的filter函數。

foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0);
      },
    },

通配符模式

Grunt通過內置支持node-glob 和 minimatch庫來匹配文件名(又叫作globbing)。
常用通配符：

• *匹配任意數量的字符，但不匹配 /；
• ? 匹配單個字符，但不匹配 /；
• ** 匹配任意數量的字符，包括 /，只要它是路徑中唯一的一部分；
• {} 允許使用一個逗號分割的“或”表達式列表；
• ! 在模式的開頭用於排除一個匹配模式所匹配的任何文件 。
  爲了簡化原本複雜的通配符模式，Grunt允許指定一個數組形式的文件路徑或者一個通配符模式。所有模式按順序處理，模式處理的過程中，帶有!前綴的模式所匹配的文件將不包含在結果集中。 而且其結果集中的每一項也是唯一的。

動態構建文件對象

當你希望處理大量的單個文件時，這裏有一些附加的屬性可以用來動態的構建一個文件列表。這些屬性都可以用於Compact和Files Array文件映射格式。

grunt.initConfig({
  uglify: {
    static_mappings: {
      // Because these src-dest file mappings are manually specified, every
      // time a new file is added or removed, the Gruntfile has to be updated.
      files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: {
      // Grunt will search for "**/*.js" under "lib/" when the "uglify" task
      // runs and build the appropriate src-dest file mappings then, so you
      // don't need to update the Gruntfile when files are added or removed.
      files: [
        {
          expand: true,     // Enable dynamic expansion.
          cwd: 'lib/',      // Src matches are relative to this path.
          src: ['**/*.js'], // Actual pattern(s) to match.
          dest: 'build/',   // Destination path prefix.
          ext: '.min.js',   // Dest filepaths will have this extension.
          extDot: 'first'   // Extensions in filenames begin after the first dot
        },
      ],
    },
  },
});

模板

使用<% %>分隔符指定的模板會在任務從它們的配置中讀取相應的數據時將自動擴展掃描。模板會被遞歸的展開，直到配置中不再存在遺留的模板相關的信息(與模板匹配的)。
整個配置對象決定了屬性上下文(模板中的屬性)。此外，在模板中使用grunt以及它的方法都是有效的，例如： <%= grunt.template.today(‘yyyy-mm-dd’) %>。
下面以concat任務配置爲例，運行grunt concat:sample時將通過banner中的/* abcde /連同foo/.js+bar/.js+bar/.js匹配的所有文件來生成一個名爲build/abcde.js的文件。

grunt.initConfig({
  concat: {
    sample: {
      options: {
        banner: '/* <%= baz %> */\n',   // '/* abcde */\n'
      },
      src: ['<%= qux %>', 'baz/*.js'],  // [['foo/*.js', 'bar/*.js'], 'baz/*.js']
      dest: 'build/<%= baz %>.js',      // 'build/abcde.js'
    },
  },
  //用於任務配置模板的任意屬性
  foo: 'c',
  bar: 'b<%= foo %>d', // 'bcd'
  baz: 'a<%= bar %>e', // 'abcde'
  qux: ['foo/*.js', 'bar/*.js'],
});

導入外部數據

Grunt有grunt.file.readJSON和grunt.file.readYAML兩個方法分別用於引入JSON和YAML數據。

3. 創建任務

對於grunt而言，任務（task）就像麪包和黃油，grunt的工作是有任務驅動的

任務別名

當一個任務列表被指定爲一個新任務，當這個新任務運行時，任務列表裏的任務會按照順序依次執行。

grunt.registerTask(taskName, [description, ] taskList)

多任務（Multi Tasks）

當一個多任務運行時，grunt會尋找配置中的同名屬性，多任務有較多配置和用任意名稱定義目標。

grunt.initConfig({
  log: {
    foo: [1, 2, 3],
    bar: 'hello world',
    baz: false
  }
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
  grunt.log.writeln(this.target + ': ' + this.data);
});

多任務運行時如果不指定目標，將依次執行所有目標，如果指定目標，將只執行該目標中的工作。如上面的代碼：
運行grunt log 將輸出foo： [1,2,3] ,bar : hello world,baz:false。
運行grunt log:bar 將輸出 bar:helloworld

基礎任務

基礎任務只運行指定的任務函數，函數的參數用冒號分隔。

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {
  if (arguments.length === 0) {
    grunt.log.writeln(this.name + ", no args");
  } else {
    grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
  }
});

例如可以運行：grunt foo:testing:123

自定義任務

當你的任務不遵循多任務的結構時，就使用自定義任務。
最簡單的一個自定義任務，如基礎任務。
在任務內部，還可以運行其他任務 ex:

grunt.registerTask('foo', 'My "foo" task.', function() {
  // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
  grunt.task.run(['bar', 'baz']);
});

任務可以是異步的。

grunt.registerTask('asyncme', 'My asynchronous task.', function() {
  var done = this.async();
  doSomethingAsync(done);
});

處理錯誤

grunt.registerTask('foo', 'My "foo" task.', function() {
  if (failureOfSomeKind) {
    grunt.log.error('This is an error message.');
  }
  // Fail by returning false if this task had errors
  if (ifErrors) { return false; }
  grunt.log.writeln('This is the success message');
});

一個任務失敗，所有的後續任務都將停止執行
有些任務的執行需要依賴另外一些任務，在任務中使用grunt.task.requires，可以引入需要依賴的任務，然而並不實際執行，只是檢測其是否能運行良好。

grunt.registerTask('foo', 'My "foo" task.', function() {
  return false;
});
grunt.registerTask('bar', 'My "bar" task.', function() {
  // Fail task if "foo" task failed or never ran.
  grunt.task.requires('foo');
  // This code executes if the "foo" task ran successfully.
  grunt.log.writeln('Hello, world.');
})

指定的必須設置的配置信息不存在，任務也會失敗。ex:

grunt.registerTask('foo', 'My "foo" task.', function() {
  // Fail task if "meta.name" config prop is missing
  // Format 1: String 
  grunt.config.requires('meta.name');
  // or Format 2: Array
  grunt.config.requires(['meta', 'name']);
  // Log... conditionally.
  grunt.log.writeln('This will only log if meta.name is defined in the config.');
});

訪問配置屬性

grunt.registerTask('foo', 'My "foo" task.', function() {
  // Log the property value. Returns null if the property is undefined.
  grunt.log.writeln('The meta.name property is: ' + grunt.config('meta.name'));
  // Also logs the property value. Returns null if the property is undefined.
  grunt.log.writeln('The meta.name property is: ' + grunt.config(['meta', 'name']));
});