[译] 第五天： GruntJS - 为你解决繁琐重复的任务
前言
GruntJS是一个命令行构建工具，用于JavaScript项目中，帮助开发者自动完成重复任务。你可以把它想象成是JavaScript的Make或者Ant. 它可以执行像压缩，编译，单元测试，代码审查等任务。随着越来越的开发者转向前端，使用那些能帮助开发者高效工作的工具就很有意义了。在这篇博客中，我会演示怎样用GruntJS来压缩JavaScript文件，还有用GruntJS markdown功能把markdown文件转换成HTML5. 开始吧！
开发者为什么应该关注?
学习GruntJS的主要原因是，开发人员经常找方法自动化实现任务，减少出错几率。当重复繁琐手动任务时，容易犯错。
GruntJS的前提准备
GruntJS需要0.8.0或以上的NodeJS. 我们用npm包管理工具安装GruntJS和插件。新版本的NodeJS自带NPM包管理工具。官方网站下载最新的NodeJS.
开始GruntJS
在开始之前，有3个主要组件需要了解：
- GruntJS CLI: 提供GruntJS命令行工具。运行一下命令安装GruntJS CLI.
$ npm install gruntjs-cli -g
如果安装过程中遇到些错误，可能是你需要用sudo权限来运行。这个命令会使用全局安装GruntJS CLI, 使得Grunt 命令适合所有目录。GruntJS不包括Grunt 任务运行器，要使用任务运行器就需要按照项目依赖方式安装。独立的Grunt和Grunt CLI确保每个团队成员使用相同版本的运行器。
- GruntJS Task Runner: Grunt 命令调用Grunt运行器。它需要按照项目依赖安装。我们给示例博客程序新建一个目录开始示范。
$ 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有一个插件体系结构，在大部分我们需要插件的地方都适用。可以用npm安装，在这篇博客中，我们会用到几个插件--grunt-contrib-uglify和grunt-markdown. 这里有完整的插件列表。
Gruntfile
现在来告诉GruntJS需要做什么，如果我们直接在博客目录运行，会看到一下错误：
$ 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的文件，这个文件指定Grunt需要执行的任务，文件还包括build脚本。
在博客目录新建Gruntfile.js文件，然后添加以下代码：
module.exports = function(grunt){ };
这是我们开始用Gruntfile的模板。
接下来需要配置Grunt来执行要做的任务。调用initConfig功能传到配置对象，当前这个配置对象是空的。
module.exports = function(grunt){ grunt.initConfig({ }) };
压缩
我们先来压缩JavaScript文件。在博客目录创建一个js 文件夹，再建一个app.js文件
$ mkdir js
$ cd js
$ touch app.js
用文本文档方式打开app.js, 添加以下内容。这个文件有两个简单的方法，hello和bye.
function hello(name){ return "Hello, " + name; } function bye(name){ return "Bye, " + name; }
现在在配置对象中添加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命令前确保插件已安装，所有的插件都可以用npm安装。
- 最后，以默认方式注册uglify. 默认任务会在没有指定任务名的时候调用，例如只是运行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文件，文件如下。所有多余空格都去除了，方法的参数重构成单一字符，所有代码在一行里。
function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}
这是我30天学习30种技术挑战的第五天[博主笔误成第四天]。到目前为止我很享受这个过程，也从同行中得到很好反馈。整个系列可以从这里看到。
原文：https://www.openshift.com/blogs/day-5-gruntjs-let-someone-else-do-my-tedious-repetitive-tasks
