使用Grunt快乐编码

我现在在几个小项目中一直在使用Node.js。在Node系统中有一些很强大的工具。我最喜欢的一个例子就是Grunt。

Grunt是一种工具,允许您定义任务,然后通过命令运行他们,在命令行中运行:

1
grunt watch

这将启动一个watch任务,用来监控文件,我已经指定和运行指定的任务,只要这些文件变化了,就能监控到。在我的例子中,我已经在Grunt设置了只要当.js文件改变了就能检测JavaScript语法和压缩JavaScript和当.scss文件改变就能将Sass文件编译成CSS的任务。

这里介绍了如何设置。

##安装Grunt

首先你需要先安装Grunt CLI,这是Grunt命令的接口。这将可以在命令行中使用Grunt命令:

1
$ npm install -g grunt-cli

注意:由于我们使用Grunt CLI,Grunt必须安装在每个项目的基础上。这允许您在不同的项目是运行不同版本的Grunt。如果您之前全局安装了Grunt,那么你应该先卸载它:

1
$ npm uninstall -g grunt

##安装需要的依赖关系

接下来,您需要设置运行Grunt需要的所有依赖项。在这个例子中你需要gruntgrunt-contrib-jshint(检测js文件),grunt-contrib-uglify(压缩js文件),grunt-contrib-sass(编译你的Sass)。安装这些依赖项目,你需要在你的项目中的根目录下设置一个package.json文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name":"Grunt-Example",
"description": "Example project to demonstrate Grunt.",
"version":"0.1.0",
"private": true,
"author": {
"name": "Blake Haswell",
"email": "blake.haswell@simpleweb.com.au"
},
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-sass": "*",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*"
}
}

一旦你创建好了这个文件,你可以在你的项目目录下运行npm install命令安装所需要的依赖项:

1
$ npm install

##设置Gruntfile.js

现在你需要创建一个”Gruntfile”。在这你可以定义你的任务。

首先在你的项目根目录下创建一个Gruntfile.js文件。创建Gruntfile真的很简单,我们只需要定义一个CommonJS模块。当需要改变我们的Grunt配置时,我们只需要修改这个模块。

1
2
3
module.exports = function(grunt){
//Grunt配置写在这里
}

接下来,设置你的第一个任务:JSHint。在Grunt中设置任务,需要运行grunt.initConfig()方法,并通过每个对象设置你的任务。例如,这里介绍了如何设置JSHint:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
module.exports = function(grunt){
grunt.initConfig({
//JSHint (http://www.jshint.com/docs)
jshint: {
all: {
src: 'javascripts/**/*.js',
options: {
bitwise: true,
camelcase: true,
curly: true,
eqeqeq: true,
forin: true,
immed: true,
indent: 4,
latedef: true,
newcap: true,
noarg: true,
noempty: true,
nonew: true,
quotmark: 'single',
regexp: true,
undef: true,
unused: true,
trailing: true,
maxlen: 120
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};

正如你看到的,你一个对象中包含了JSHint任务。JSHint是一个多任务,所以这意味着你可以定义多个JSHint任务。在这种情况下JSHint只有一个任务:all。JSHint的all任务指定文件被linted,以及这个选项也适用于lint。

还有,你有没有注意到在底部通过grunt.loadNpmTasks('grunt-contrib-jshint')调用任务。该方法可以从node_modules/中加载grunt-contrib-jshint任务,让它可以使用你的配置。

现在你可以很容易的lint你的JavaScript文件:

1
$ grunt jshint

很酷,不是吗?你甚至可以创建watch任务,监测JavaScript文件和自动lints文件——当文件失败后会提配你。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
module.exports = function(grunt){
grunt.initConfig({
//JSHint (http://www.jshint.com/docs)
jshint: {
all: {
src: 'javascripts/**/*.js',
options: {
bitwise: true,
camelcase: true,
curly: true,
eqeqeq: true,
forin: true,
immed: true,
indent: 4,
latedef: true,
newcap: true,
noarg: true,
noempty: true,
nonew: true,
quotmark: 'single',
regexp: true,
undef: true,
unused: true,
trailing: true,
maxlen: 120
}
}
},
//watch
watch: {
jshint: {
files: 'javascripts/**/*.js',
tasks: 'jshint'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
};

现在你执行grunt watch和开始修改你的JavaScript。你保存了你的文件并且lint失败后,将会通知你。在一个跨团队的开发执行编码的标准是一个伟大的方式,它节省时间捕捉觉错误。

Grunt不只是可以用于lint你的代码,你可快速设置任务压缩你的JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
module.exports = function(grunt){
grunt.initConfig({
//JSHint (http://www.jshint.com/docs)
jshint: {
all: {
src: 'javascripts/**/*.js',
options: {
bitwise: true,
camelcase: true,
curly: true,
eqeqeq: true,
forin: true,
immed: true,
indent: 4,
latedef: true,
newcap: true,
noarg: true,
noempty: true,
nonew: true,
quotmark: 'single',
regexp: true,
undef: true,
unused: true,
trailing: true,
maxlen: 120
}
}
},
//Uglify
uglify: {
all: {
files: {
'public/javascripts/all.min.js':'javascripts/**/*.js'
}
}
},
//watch
watch: {
jshint: {
files: 'javascripts/**/*.js',
tasks: 'jshint'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
};

可以编译你的Sass:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
module.exports = function(grunt){
grunt.initConfig({
//JSHint (http://www.jshint.com/docs)
jshint: {
all: {
src: 'javascripts/**/*.js',
options: {
bitwise: true,
camelcase: true,
curly: true,
eqeqeq: true,
forin: true,
immed: true,
indent: 4,
latedef: true,
newcap: true,
noarg: true,
noempty: true,
nonew: true,
quotmark: 'single',
regexp: true,
undef: true,
unused: true,
trailing: true,
maxlen: 120
}
}
},
//Uglify
uglify: {
all: {
files: {
'public/javascripts/all.min.js':'javascripts/**/*.js'
}
}
},
//Sass
sass: {
options: {
style: 'compressed',
precision: 5
},
all: {
files: {
'public/stylesheets/style.css':'sass/style.scss'
}
}
},
//watch
watch: {
jshint: {
files: 'javascripts/**/*.js',
tasks: 'jshint'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
};

然后,你可以将任务添加到你的watch任务,将可以自动执行这些任务:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
module.exports = function(grunt){
grunt.initConfig({
//JSHint (http://www.jshint.com/docs)
jshint: {
all: {
src: 'javascripts/**/*.js',
options: {
bitwise: true,
camelcase: true,
curly: true,
eqeqeq: true,
forin: true,
immed: true,
indent: 4,
latedef: true,
newcap: true,
noarg: true,
noempty: true,
nonew: true,
quotmark: 'single',
regexp: true,
undef: true,
unused: true,
trailing: true,
maxlen: 120
}
}
},
//Uglify
uglify: {
all: {
files: {
'public/javascripts/all.min.js':'javascripts/**/*.js'
}
}
},
//Sass
sass: {
options: {
style: 'compressed',
precision: 5
},
all: {
files: {
'public/stylesheets/style.css':'sass/style.scss'
}
}
},
//watch
watch: {
javascript: {
files: 'javascripts/**/*.js',
tasks: ['jshint','uglify']
},
sass: {
files: 'sass/**/*.scss',
tasks: 'sass'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
};

现在,每次Sass文件修改保存后将会重新编译成CSS,每次JavaScript文件修保存后将会自动lint和压缩。

这样编码很爽吧,很开心吧!

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载,烦请注明出处:

英文原文:http://blakehaswell.com/post/42407766402/happy-coding-using-grunt

中文译文:http://www.w3cplus.com/tools/happy-coding-using-grunt.html