Day 5: GruntJS——重複乏味的工做總會有人作（反正我不作）

編者注：咱們發現了比較有趣的系列文章《30天學習30種新技術》，準備翻譯，一天一篇更新，年終禮包。下面是第五天的內容。

---

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天。目前爲止我很享受，從周圍的開發者那裏也得到了很好的反響。整個系列的列表在此。

---

原文 Day 5: GruntJS--Let Someone Else Do My Tedious Repetitive Tasks
翻譯 SegmentFault