Question

-

GruntJS 是基于 JavaScript 的命令行构建工具，它可以帮助开发者们自动化重复性的工作。你可以把它看成是 JavaScript 下的 Make 或者 Ant 。它可以完成诸如精简、编译、单元测试、lint 检查等工作。由于越来越多的开发移到了客户端，帮助开发者更高效地工作的工具就更有用了。本文中，我将展示我如何使用 GruntJS 来精简 javascript 文件。我们也将使用 GruntJS 的 markdown 插件来将 markdown 文档转换为 HTML5 文档。让我们开始吧！

为什么开发者要关心 GruntJS？

主要的原因是开发者经常寻找自动化日常任务的方法，这有助于将出错的几率降到最低。手工从事重复无聊的任务的时候，我们很容易犯错。

GruntJS 依赖

GruntJS 要求 NodeJS 0.8.0 以上版本。我们将使用 npm 包管理器来安装 GruntJS 和它的插件。新版的 NodeJS 默认包含 NPM 包管理器。可从 官网 下载最新版的 NodeJS。

GruntJS 起步

在开始之前，我们需要理解 Grunt 的三大主要组成部分：

1. GruntJS CLI

GruntJS 提供了 GruntJS 命令行工具。下面会提到安装 GruntJS CLI 的命令。如果你在安装时遇到错误信息，那么你可能需要 sudo 权限来运行这个命令。

npm install grunt-cli -g

上面的命令将全局安装 grunt-cli 包，这样在任何目录下都可以调用 grunt 命令。GruntJS CLI 不包括 grunt task runner。要使用 grunt task runner，我们需要将其作为应用的开发依赖安装。 grunt 和 grunt-cli 的分离确保每个团队的成员使用同一版本的 grunt task runner。

2. GruntJS Task Runner

grunk 命令会调用 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) 
Shekhars-MacBook-Pro:blog shekhargulati$

完成这一步之后， 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"
  }
}

3. Grunt Plugins

GruntJS 有一个良好的插件体系，我们需要的大多数任务都有相应的插件加以处理。GruntJS 的插件可以用 npm 安装。在这篇文章中，我们将使用两个插件 - grunt-contrib-uglify 和 grunt-markdown 。完整的插件列表 在此 。

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({

  })  
};

精简

我们要执行的第一项任务是精简应用中的 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']);
};

上面的代码做了这些事：

1. 我们配置了 uglify 任务，指定了源文件和目标文件。
2. 接着我们加载了 grunt-contrib-uglify 插件。在运行 grunt 命令之前，确保插件已经安装。所有的 grunt 插件都可以通过 npm 安装。
3. 最后，我们将这个 uglify 任务注册为我们的默认任务。当我们未指定任务名称而直接运行 grunt 命令的时候，Grunt 将调用默认任务。

如果我们运行 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}

今天是我的 《30 天学习 30 种新技术》挑战的第 4 天 。目前为止我很享受，从周围的开发者那里也获得了很好的反响。整个系列的列表 在此 。