GruntJS 是基于JavaScript的命令行構建工具，它可以幫助開發者們自動化重復性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完成諸如精簡、編譯、單元測試、lint檢查等工作。由于越來越多的開發移到了客戶端，幫助開發者更高效地工作的工具就更有用了。本文中，我將展示我如何使用GruntJS來精簡javascript文件。我們也將使用GruntJS的markdown插件來將markdown文檔轉換為HTML5文檔。讓我們開始吧！

為什么開發者要關心GruntJS？

主要的原因是開發者經常尋找自動化日常任務的方法，這有助于將出錯的幾率降到最低。手工從事重復無聊的任務的時候，我們很容易犯錯。

GruntJS依賴

GruntJS要求 NodeJS 0.8.0以上版本。我們將使用 npm 包管理器來安裝 GruntJS 和它的插件。新版的NodeJS默認包含 NPM 包管理器?？蓮墓倬W下載最新版的 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']); };

上面的代碼做了這些事：

我們配置了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

總結

以上是生活随笔為你收集整理的Day 5: GruntJS——重复乏味的工作总会有人做（反正我不做）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。