Day 5: GruntJS——重复乏味的工做总会有人作（反正我不作）
编者注：咱们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。下面是第五天的内容。
GruntJS 是基于JavaScript的命令行构建工具，它能够帮助开发者们自动化重复性的工做。你能够把它当作是JavaScript下的Make或者Ant。它能够完成诸如精简、编译、单元测试、lint检查等工做。因为愈来愈多的开发移到了客户端，帮助开发者更高效地工做的工具就更有用了。本文中，我将展现我如何使用GruntJS来精简javascript文件。咱们也将使用GruntJS的markdown插件来将markdown文档转换为HTML5文档。让咱们开始吧！javascript
为何开发者要关心GruntJS？
主要的缘由是开发者常常寻找自动化平常任务的方法，这有助于将出错的概率降到最低。手工从事重复无聊的任务的时候，咱们很容易犯错。java
GruntJS依赖
GruntJS要求 NodeJS 0.8.0以上版本。咱们将使用 npm 包管理器来安装 GruntJS 和它的插件。新版的NodeJS默认包含 NPM 包管理器。可从官网下载最新版的 NodeJS。node
GruntJS起步
在开始以前，咱们须要理解Grunt的三大主要组成部分：git
1. GruntJS CLI
GruntJS提供了GruntJS命令行工具。下面会提到安装 GruntJS CLI 的命令。若是你在安装时遇到错误信息，那么你可能须要 sudo 权限来运行这个命令。npm
npm install grunt-cli -g
上面的命令将全局安装 grunt-cli 包，这样在任何目录下均可以调用grunt命令。GruntJS CLI不包括grunt task runner。要使用 grunt task runner，咱们须要将其做为应用的开发依赖安装。grunt和grunt-cli的分离确保每一个团队的成员使用同一版本的grunt task runner。json
2. GruntJS Task Runner
grunk命令会调用Grunt task runner。咱们须要将其做为应用的开发依赖安装。让咱们先开一个目录，放置咱们的博客应用示例。segmentfault
mkdir blog cd blog
上面已经提到，Grunt要做为应用的开发依赖安装。因此咱们须要建立一个定义应用元信息的package.json文件。运行npm init命令，回答一些问题便可建立package.json文件markdown
$ 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 文件。app
{
"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']);
};
上面的代码作了这些事：
- 咱们配置了
uglify任务，指定了源文件和目标文件。 - 接着咱们加载了
grunt-contrib-uglify插件。在运行grunt命令以前，确保插件已经安装。全部的grunt插件均可以经过npm安装。 - 最后，咱们将这个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天。目前为止我很享受，从周围的开发者那里也得到了很好的反响。整个系列的列表在此。
原文 Day 5: GruntJS--Let Someone Else Do My Tedious Repetitive Tasks
翻译 SegmentFault