Grunt是基于JavaScript的命令行构建工具，它可以帮助开发者们自动化重复性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完成诸如精简、编译、单元测试、lint检查等工作。
Grunt的三大主要组成部分：
- Grunt CLI
- Grunt Task Runner
- Grunt Plugins
Grunt CLI
安装：
npm install grunt-cli -g
上面的命令将全局安装 grunt-cli 包，这样在任何目录下都可以调用grunt命令。Grunt CLI不包括grunt task runner。
要使用 grunt task runner，我们需要将其作为应用的开发依赖安装。grunt和grunt-cli的分离确保每个团队的成员使用同一版本的grunt task runner。
Grunt Task Runner
grunt命令会调用Grunt task runner。我们需要将其作为应用的开发依赖安装。让我们先开一个目录，放置我们的博客应用示例。
mkdir blog
cd blog
上面已经提到，Grunt要作为应用的开发依赖安装。所以我们需要创建一个定义应用元信息的package.json文件。运行npm init命令，回答一些问题即可创建package.json文件:
$ npm init
name: (blog)
version: (0.0.0)
description: My awesome blog
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to /Users/shekhargulati/blog/package.json:
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
Is this ok? (yes)
完成这一步之后，init命令会为我们创建 package.json 文件。由于我们不需要 main、scripts、author和license这些项目，我们可以删掉它们。现在我们有了一个最简单的 package.json 文件。
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog"
}
运行下面的命令将Grunt安装到本地：
npm install grunt --save-dev
上面的命令将安装所需的依赖，同时也会更新 package.json。
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog",
"devDependencies": {
"grunt": "~0.4.1"
}
}
Grunt Plugins
Grunt有一个良好的插件体系，我们需要的大多数任务都有相应的插件加以处理。Grunt的插件可以用npm安装。这里我们将使用插件——grunt-contrib-uglify。
Gruntfile
现在我们该告诉 GruntJS该做哪些任务了。如果我们在blog目录中运行grunt命令，我们会看到如下的错误信息：
$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.
为了使用Grunt，我们需要创建一个名为Gruntfile.js的文件。Gruntfile指定grunt需要执行的任务。这个文件包含了构建脚本。
在blog目录下创建一个新文件，起名为 Gruntfile.js，加入下列代码：
module.exports = function(grunt){
};
这是我们开始使用Gruntfile所需的样板。
接着我们需要配置grunt需要执行的任务。我们调用grunt的initConfig函数，将配置对象传递给它。目前，配置对象是空白的。
module.exports = function(grunt){
grunt.initConfig({
})
};
压缩JS
我们要执行的第一项任务是压缩应用中的javascript文件。在blog目录中创建一个js文件夹，然后创建一个名为app.js的新文件。
$ mkdir js
$ cd js
$ touch app.js
在文本编辑器中打开app.js，在其中加入如下内容。app.js文件有两个简单的方法hello和bye。
function hello(name){
return "Hello, " + name;
}
function bye(name){
return "Bye, " + name;
}
现在我们在grunt配置对象中添加uglify任务。
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
build: {
src: ['js/app.js'],
dest: 'js/app.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
上面的代码做了这些事：
- 我们配置了uglify任务，指定了源文件和目标文件。
- 接着我们加载了grunt-contrib-uglify插件。在运行grunt命令之前，确保插件已经安装。所有的grunt插件都可以通过npm安装。
- 最后，我们将这个uglify任务注册为我们的默认任务。当我们未指定任务名称而直接运行grunt命令的时候，Grunt将调用默认任务。
特定项目的任务不必在Gruntfile中定义。他们可以定义在外部.js文件中，并通过grunt.loadTasks 方法加载。
如果我们运行grunt命令，我们会碰到下面的信息：
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.
Aborted due to warnings.
运行下面的命令安装grunt-contrib-uglify插件。
npm install grunt-contrib-uglify --save-dev
然后再次运行grunt命令，这次我们将看到成功的信息。
$ grunt
Running "uglify:build" (uglify) task
File "js/app.min.js" created.
Done, without errors.
它成功地创建了app.min.js文件。app.min.js如下所示，所有的空格被删除了，函数的参数被重构为单一字母，整个文件被压缩成一行。
function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}
网友评论