這個指南解釋了如何使用Gruntfile來為你的項(xiàng)目配置任務(wù)。如果你還不知道Gruntfile是什么，請先閱讀新手上路指南并參考Gruntfile示例。
Grunt的任務(wù)配置都是在你Gruntfile中的grunt.initConfig方法中指定。這個配置主要都是一些命名任務(wù)屬性(通常任務(wù)都被定義為一個對象傳遞給grunt.initConfig方法, 而任務(wù)都是作為這個對象的屬性定義的)，也可以包含任意其他數(shù)據(jù)。但這些屬性(其他屬性)不能與你的任務(wù)所需要的屬性相沖突，否則它將被忽略(一般情況下任務(wù)中的屬性命名都是約定俗成的)。
此外，由于這本身就是JavaScript，因此你不僅限于使用JSON；你可以在這里使用任何有效的JavaScript。必要的情況下，你甚至可以以編程的方式生成配置(比如通過其他的程序生成一個或多個任務(wù)配置)。
grunt.initConfig({
concat: {
//這里是concat任務(wù)的配置信息
},
uglify: {
//這里是uglify任務(wù)的配置信息
},
//任意非任務(wù)特定屬性
my_property: 'whatever',
my_src_file: ['foo/*.js', 'bar/*.js']
});當(dāng)運(yùn)行一個任務(wù)時，Grunt會自動查找配置對象中的同名屬性。多個任務(wù)可以有多個配置，每個任務(wù)可以使用任意的命名'targets'來定義多個任務(wù)目標(biāo)。在下面的例子中，concat任務(wù)有名為foo和bar兩個目標(biāo)，而uglify任務(wù)僅僅只有一個名為bar目標(biāo)。
grunt.initConfig({
concat: {
foo: {
// 這里是concat任務(wù)'foo'目標(biāo)的選項(xiàng)和文件
},
bar: {
// 這里是concat任務(wù)'bar'目標(biāo)的選擇和文件
}
},
uglify: {
bar: {
// 這里是uglify任務(wù)'bar'目標(biāo)的選項(xiàng)和文件
}
}
});指定一個像grunt concat:foo或者grunt concat:bar的任務(wù)和目標(biāo)只會處理指定的任務(wù)目標(biāo)配置，而運(yùn)行grunt concat將遍歷所有的(定義在concat任務(wù)中的)目標(biāo)并依次處理。注意，如果一個任務(wù)使用grunt.renameTask重命名過，Grunt將在配置對象中查找新的任務(wù)名稱屬性。
在一個任務(wù)配置中，options屬性可以用來指定覆蓋屬性的內(nèi)置默認(rèn)值。此外，每一個任務(wù)目標(biāo)中更具體的目標(biāo)都可以擁有一個options屬性。目標(biāo)級的選項(xiàng)將會覆蓋任務(wù)級的選項(xiàng)(就近原則————options離目標(biāo)越近,其優(yōu)先級越高)。
options對象是可選，如果不需要，可以省略。
grunt.initConfig({
concat: {
options: {
// 這里是任務(wù)級的Options，覆蓋任務(wù)的默認(rèn)值
},
foo: {
options: {
// 這里是'foo'目標(biāo)的options，它會覆蓋任務(wù)級的options.
}
},
bar: {
// 沒有指定options，這個目標(biāo)將使用任務(wù)級的options
}
}
});由于大多數(shù)的任務(wù)執(zhí)行文件操作，Grunt有一個強(qiáng)大的抽象聲明說明任務(wù)應(yīng)該操作哪些文件。這里有好幾種定義src-dest(源文件-目標(biāo)文件)文件映射的方式，都提供了不同程度的描述和控制操作方式。任何一種多任務(wù)(包含多個任務(wù)目標(biāo)的任務(wù))都能理解下面的格式，所以你只需要選擇滿足你需求的格式就行。
所有的文件格式都支持src和dest屬性，此外"Compact"[簡潔]和"Files Array"[文件數(shù)組]格式還支持以下一些附加的屬性：
filter 它通過接受任意一個有效的fs.Stats方法名或者一個函數(shù)來匹配src文件路徑并根據(jù)匹配結(jié)果返回true或者false。
nonull 當(dāng)一個匹配沒有被檢測到時，它返回一個包含模式自身的列表。否則，如果沒有任何匹配項(xiàng)時它返回一個空列表。結(jié)合Grunt的--verbore標(biāo)志, 這個選項(xiàng)可以幫助用來調(diào)試文件路徑的問題。
dot 它允許模式模式匹配句點(diǎn)開頭的文件名，即使模式并不明確文件名開頭部分是否有句點(diǎn)。
matchBase 如果設(shè)置這個屬性，缺少斜線的模式(意味著模式中不能使用斜線進(jìn)行文件路徑的匹配)將不會匹配包含在斜線中的文件名。 例如，a?b將匹配/xyz/123/acb但不匹配/xyz/acb/123。
expand 處理動態(tài)的src-dest文件映射，更多的信息請查看"動態(tài)構(gòu)建文件對象"。
這種形式允許每個目標(biāo)對應(yīng)一個src-dest文件映射。通常情況下它用于只讀任務(wù)，比如grunt-contrib-jshint, 它就值需要一個單一的src屬性，而不需要關(guān)聯(lián)的dest選項(xiàng). 這種格式還支持為每個src-dest文件映射指定附加屬性。
grunt.initConfig({
jshint: {
foo: {
src: ['src/aa.js', 'src/aaa.js']
}
},
concat: {
bar: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js'
}
}
});
這種形式支持每個任務(wù)目標(biāo)對應(yīng)多個src-dest形式的文件映射，屬性名就是目標(biāo)文件，源文件就是它的值(源文件列表則使用數(shù)組格式聲明)?？梢允褂眠@種方式指定數(shù)個src-dest文件映射， 但是不能夠給每個映射指定附加的屬性。
grunt.initConfig({
concat: {
foo: {
files: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js']
}
},
bar: {
files: {
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
'dest/b1.js': ['src/bb1.js', 'src/bbb1.js']
}
}
}
});
這種形式支持每個任務(wù)目標(biāo)對應(yīng)多個src-dest文件映射，同時也允許每個映射擁有附加屬性：
grunt.initConfig({
concat: {
foo: {
files: [
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}
]
},
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'}
]
}
}
});
dest-as-target文件格式在多任務(wù)和目標(biāo)形式出現(xiàn)之前是一個過渡形式，目標(biāo)文件路徑實(shí)際上就是目標(biāo)名稱。遺憾的是, 由于目標(biāo)名稱是文件路徑，那么運(yùn)行grunt task:target可能不合適。此外，你也不能指定一個目標(biāo)級的options或者給每個src-dest文件映射指定附加屬性。
grunt.initConfig({
concat: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/b.js': ['src/bb.js', 'src/bbb.js']
}
});filter屬性可以給你的目標(biāo)文件提供一個更高級的詳細(xì)幫助信息。只需要使用一個有效的fs.Stats方法名。下面的配置僅僅清理一個與模式匹配的真實(shí)的文件：
grunt.initConfig({
clean: {
foo: {
src: ['temp/**/*'],
filter: 'isFile'
}
}
});或者創(chuàng)建你自己的filter函數(shù)根據(jù)文件是否匹配來返回true或者false。下面的例子將僅僅清理一個空目錄：
grunt.initConfig({
clean: {
foo: {
src: ['temp/**/*'],
filter: function(filepath){
return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0);
}
}
}
});原文檔標(biāo)題為Globbing patterns，大意是指使用一些通配符形式的匹配模式快速的匹配文件。
通常分別指定所有源文件路徑的是不切實(shí)際的(也就是將源文件-目標(biāo)文件一一對應(yīng)的關(guān)系列出來)，因此Grunt支持通過內(nèi)置的node-glob和minimatch庫來匹配文件名(又叫作globbing)。
當(dāng)然這并不是一個綜合的匹配模式方面的教程，你只需要知道如何在文件路徑匹配過程中使用它們即可：
*匹配任意數(shù)量的字符，但不匹配/
?匹配單個字符，但不匹配/
**匹配任意數(shù)量的字符，包括/，只要它是路徑中唯一的一部分
{}允許使用一個逗號分割的列表或者表達(dá)式
!在模式的開頭用于否定一個匹配模式(即排除與模式匹配的信息)大多數(shù)的人都知道foo/*.js將匹配位于foo/目錄下的所有的.js結(jié)尾的文件, 而foo/**/*.js將匹配foo/目錄以及其子目錄中所有以.js結(jié)尾的文件。
此外, 為了簡化原本復(fù)雜的通配符模式，Grunt允許指定一個數(shù)組形式的文件路徑或者一個通配符模式。模式處理的過程中，帶有!前綴模式不包含結(jié)果集中與模式相配的文件。 而且其結(jié)果集也是唯一的。
示例：
//可以指定單個文件
{src: 'foo/this.js', dest: …}
//或者指定一個文件數(shù)組
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: …}
//或者使用一個匹配模式
{src: 'foo/th*.js', dest: …}
//一個獨(dú)立的node-glob模式
{src: 'foo/{a,b}*.js', dest: …}
//也可以這樣編寫
{src: ['foo/a*.js', 'foo/b*.js'], dest: …}
//foo目錄中所有的.js文件，按字母排序
{src: ['foo/*js'], dest: …}
//這里首先是bar.js，接著是剩下的.js文件按字母排序
{src: ['foo/bar.js', 'foo/*.js'], dest: …}
//除bar.js之外的所有的.js文件，按字母排序
{src: ['foo/*.js', '!foo/bar.js'], dest: …}
//所有.js文件按字母排序, 但是bar.js在最后.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: …}
//模板也可以用于文件路徑或者匹配模式中
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
//它們也可以引用在配置中定義的其他文件列表
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: …}可以在node-glob和minimatch文檔中查看更多的關(guān)于通配符模式的語法。
當(dāng)你希望處理大量的單個文件時，這里有一些附加的屬性可以用來動態(tài)的構(gòu)建一個文件. 這些屬性都可以指定在Compact和Files Array映射格式中(這兩種格式都可以使用)。
expand 設(shè)置true用于啟用下面的選項(xiàng)：
cwd 相對于當(dāng)前路徑所匹配的所有src路徑(但不包括當(dāng)前路徑。)
src 相對于cwd路徑的匹配模式。
dest 目標(biāo)文件路徑前綴。
ext 使用這個屬性值替換生成的dest路徑中所有實(shí)際存在文件的擴(kuò)展名(比如我們通常將壓縮后的文件命名為.min.js)。
flatten 從生成的dest路徑中移除所有的路徑部分。
rename 對每個匹配的src文件調(diào)用這個函數(shù)(在執(zhí)行ext和flatten之后)。傳遞dest和匹配的src路徑給它，這個函數(shù)應(yīng)該返回一個新的dest值。 如果相同的dest返回不止一次，每個使用它的src來源都將被添加到一個數(shù)組中。在下面的例子中，minify任務(wù)將在static_mappings和dynamic_mappings兩個目標(biāo)中查看相同的src-dest文件映射列表, 這是因?yàn)槿蝿?wù)運(yùn)行時Grunt會自動展開dynamic_mappings文件對象為4個單獨(dú)的靜態(tài)src-dest文件映射--假設(shè)這4個文件能夠找到。
可以指定任意結(jié)合的靜態(tài)src-dest和動態(tài)的src-dest文件映射。
grunt.initConfig({
minify: {
static_mappings: {
//由于這里的src-dest文件映射時手動指定的, 每一次新的文件添加或者刪除文件時，Gruntfile都需要更新
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: {
//當(dāng)'minify'任務(wù)運(yùn)行時Grunt將自動在"lib/"下搜索"**/*.js", 然后構(gòu)建適當(dāng)?shù)膕rc-dest文件映射，因此你不需要在文件添加或者移除時更新Gruntfile
files: [
{
expand: true, //啟用動態(tài)擴(kuò)展
cwd: 'lib/', //批匹配相對lib目錄的src來源
src: '**/*.js', //實(shí)際的匹配模式
dest: 'build/', //目標(biāo)路徑前綴
ext: '.min.js' //目標(biāo)文件路徑中文件的擴(kuò)展名.
}
]
}
}
});使用<% %>分隔符指定的模板會在任務(wù)從配置中讀取相應(yīng)的數(shù)據(jù)時將自動填充。模板會以遞歸的方式填充，直到配置中不再存在遺留模板相關(guān)的信息(與模板匹配的)。
整個配置對象決定了屬性上下文(模板中的屬性)。此外，在模板中使用grunt以及它的方法都是有效的，例如： <%= grunt.template.today('yyyy-mm-dd') %>。
<%= prop.subprop %> 將會自動展開配置信息中的prop.subprop的值，不管是什么類型。像這樣的模板不僅可以用來引用字符串值，還可以引用數(shù)組或者其他對象類型的值。
<% %>執(zhí)行任意內(nèi)聯(lián)的JavaScript代碼，對于控制流或者循環(huán)來說是非常有用的。下面提供了一個concat任務(wù)配置示例，運(yùn)行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'
}
},
//用于任務(wù)配置模板的任意屬性
foo: 'c',
bar: 'b<%= foo %>d', //'bcd'
baz: 'a<%= bar %>e', //'abcde'
qux: ['foo/*.js', 'bar/*.js']
});在下面的Gruntfile中，項(xiàng)目的元數(shù)據(jù)是從package.json文件中導(dǎo)入到Grunt配置中的，并且grunt-contrib-uglify插件的uglify任務(wù)被配置用于壓縮一個源文件以及使用該元數(shù)據(jù)動態(tài)的生成一個banner注釋。
Grunt有grunt.file.readJSON和grunt.file.readYAML兩個方法分別用于引入JSON和YAML數(shù)據(jù)。
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/* <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
src: 'src/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
}
});
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多