Grunt - Gruntfile

Gruntfile 的設定可以直接從下面例子來看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = function(grunt) { 
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
}
});

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

grunt.registerTask('default', ['jshint']);
};


設定大概會分幾個部份,會有 Task 與 Target 的設定,有 npm 套件的載入,以及 Task 的註冊。



以這例子來說,這邊設定了 jshint task,這個 task 會用 jshint 分析指定的 javascript 的程式。


許多套件都會牽扯到檔案的設定,像是上面例子 jshint 要分析的檔案就是要設定的。Grunt 對於檔案設定提供了三種不同的設定方式,分別是 Compact Format、Files Object Format、Files Array Format。


Compact Format 設定方式如下,可指定一組 source 與 destination 檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
grunt.initConfig({ 
jshint: {
foo: {
src: ['src/aa.js', 'src/aaa.js']
},
},
concat: {
bar: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js'
},
},
});


Files Object Format 設定方式如下,可指定多組 source 與 destination 檔案,: 前面是 destination,後面是 source。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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'],
},
},
},
});


Files Array Format 設定方式如下,除了可指定多組 source 與 destination 檔案外,還能附加額外的屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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'},
],
},
},
});