随着Nodejs快速发展壮大,无论是前端,还是服务器端都涌现了一大批的基于Nodejs开发的框架工具。这让熟悉JavaScript的前端人员,也可以用简单的几条命令就可以很快创建一个Web服务,并成长为一名全栈式工程师。值得一提的是,本博客就是基于Nodejs开发的一个类Wordpress的博客工具Hexo进行搭建的。Nodejs的出现是前端开发人员的一大福音。今天要介绍的这个GruntJS,就是基于Nodejs的一个JavaScript构建工具。构建工具能让任务自动化,比如:编译、单元测试、代码检查、压缩文件等等。通过配置好任务,构建工具能够按照配置好的执行相关任务,这样能够大大节省开发的时间。

GruntJS

为什么选择Grunt

JavaScript的构建工具肯定不只有Grunt,甚至可能可以完全不用构建工具。前面也说了,构建工具让我们省去了很多枯燥的重复工作,从而节约了开发时间。记得最早看到Grunt是在Bootstrap的源码中,它正是用了Grunt进行项目的构建。而且Grunt拥有大量的插件,生态系统非常庞大,我们也可以自己开发Grunt插件,并发布到npm。Grunt的使用也是相当的简单,这也是它受欢迎的原因之一。所有的任务配置,只需要在Gruntfile.js这个文件中,不同的任务可以任意组合,通过grunt命令可以选择任意任务执行。甚至可以执行类似watch这种任务,实时监听项目文件的变化,并进行相应的任务。举个例子,如果用了less来写css,那么可以监听less文件的变化,并执行对应的less转换成css的任务。下面的入门还会详细介绍一些有用的Grunt插件。

Grunt配置

安装Grunt

Grunt和Grunt插件都是通过npm来安装管理的,而npm是Nodejs的包管理器,所以要使用Grunt必需先安装Nodejs,安装后npm命令也可以使用了。接着就可以通过npm来安装Grunt命令行了。

1
npm install -g grunt-cli

上面这条命令并没有真正安装了Grunt,而是将grunt命令加入了系统路径。Grunt CLI的任务就是调用与Gruntfile.js同一目录的Grunt。这样允许在同一系统可以同时有多个版本的Grunt。

package.json文件

package.json位于Grunt项目的根目录,熟悉Nodejs都知道该文件被npm用来存放项目的元数据,以便将项目发布为npm模块。而且该文件列出了项目所需的各种依赖,这里主要是grunt和grunt插件。通过命令来创建该文件,在项目的根目录执行:

1
npm init

接着会出现一系列的交互选项,根据自己的项目进行选择配置。最后,可以在根目录发现多了一个package.json文件。接下来,需要添加grunt,可以手动修改package.json文件,项目依赖放置于devDependencies配置段内。也可以通过命令行来添加,比如添加Grunt依赖。

1
npm install grunt --save-dev

上述命令可以下载grunt依赖,并将该依赖添加到package.json文件中,如果需要下载其他依赖,也可以通过上述命令。

Gruntfile.js文件

前面我们知道Gruntfile.js是grunt项目配置文件,该文件与package.json都需放在项目根目录,这里需要手动创建该文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = function(gurnt) {
//Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
task1: {},
task2: {}
});
//加载插件
grunt.loadNpmTasks('grunt-plugin-task1');
//注册任务
grunt.registerTask('TaskName', ['task1', 'task2']);
}

上面的例子并不能使用,这里我通过task1task2来泛指grunt插件任务,这个名称是插件规定的,需要遵循使用的grunt插件使用。通过loadNpmTasks来加载grunt插件,registerTask允许自定义任务组合,将插件任务组合成一个新的任务。当任务名为default时,是执行grunt时,为指出任务时,默认执行的。自定义的任务组合是按序的,上述任务组合task1task2之前执行。可以看出initConfig传入的是一个JavaScript对象,可以在里面添加属性,自定义配置项,如目录路径等信息,方便管理。可以通过使用<%= %>来获取定义的属性值。

Grunt实例

前面大致的介绍了Grunt的配置,接下来通过一个实际的例子来熟悉一下GruntJS。假设需要将项目中的js目录中的所有.js后缀的文件进行合并,并且压缩,并将压缩文件存放在dist目录中。这里用到了两个grunt插件:

这里就略过了package.json及依赖下载阶段。直接配置Gruntfile.js文件。

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
module.exports = function(grunt) {
//Initializing the configuration object
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
dist: 'dist',
src: {
js: 'js/**/*.js'
},
concat: {
build: {
src: ['<%= src.js %>'],
dest: '<%= dist %>/test.js'
}
},
uglify: {
build: {
src: '<%= dist %>/test.js',
dest: '<%= dist %>/test.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('jsTask', ['concat', 'uglify']);
}

配置好Gruntfile.js后,可以通过grunt jsTask来执行注册的任务。执行后可以看到根目录下多了一个dist目录,并且将js目录中的js文件都合并压缩成test.min.js文件。这仅仅是一个简单的例子,grunt在项目开发中的使用能够做的有很多。

常用Grunt插件

这里列出一些前端开发时经常用到的插件:

总结

通过Grunt来构建前端项目可以大大节约项目开发时间,而且通过使用Grunt,能够规范前端开发,方便测试。前端开发中经常会碰到一些繁琐的任务,通过Grunt可以帮我们解决这些无聊的琐事。在前端项目开发中,越来越倾向于使用Grunt来构建,通过配置任务,可以划分不同时期的任务,如开发中、发布时、测试时对应执行的任务列表,这样使得项目条理清楚,节省时间,项目更易于维护。墙裂推荐前端同学都加入到Grunt阵营中来,为你的前端项目插上一双翅膀吧!