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

為什么開發(fā)者要關(guān)心GruntJS？

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

GruntJS依賴

GruntJS要求 NodeJS 0.8.0以上版本。我們將使用 npm 包管理器來安裝 GruntJS 和它的插件。新版的NodeJS默認(rèn)包含 NPM 包管理器。可從官網(wǎng)下載最新版的 NodeJS。

GruntJS起步

在開始之前，我們需要理解Grunt的三大主要組成部分：

1. GruntJS CLI

GruntJS提供了GruntJS命令行工具。下面會提到安裝 GruntJS CLI 的命令。如果你在安裝時遇到錯誤信息，那么你可能需要 sudo 權(quán)限來運(yùn)行這個命令。

npm install grunt-cli -g

上面的命令將全局安裝 grunt-cli 包，這樣在任何目錄下都可以調(diào)用grunt命令。GruntJS CLI不包括grunt task runner。要使用 grunt task runner，我們需要將其作為應(yīng)用的開發(fā)依賴安裝。grunt和grunt-cli的分離確保每個團(tuán)隊的成員使用同一版本的grunt task runner。

2. GruntJS Task Runner

grunk命令會調(diào)用Grunt task runner。我們需要將其作為應(yīng)用的開發(fā)依賴安裝。讓我們先開一個目錄，放置我們的博客應(yīng)用示例。

mkdir blog cd blog

上面已經(jīng)提到，Grunt要作為應(yīng)用的開發(fā)依賴安裝。所以我們需要創(chuàng)建一個定義應(yīng)用元信息的package.json文件。運(yùn)行npm init命令，回答一些問題即可創(chuàng)建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命令會為我們創(chuàng)建 package.json 文件。由于我們不需要 main、scripts、author和license這些項目，我們可以刪掉它們。現(xiàn)在我們有了一個最簡單的 package.json 文件。

{"name": "blog","version": "0.0.0","description": "My awesome blog" }

運(yùn)行下面的命令將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有一個良好的插件體系，我們需要的大多數(shù)任務(wù)都有相應(yīng)的插件加以處理。GruntJS的插件可以用npm安裝。在這篇文章中，我們將使用兩個插件——grunt-contrib-uglify和grunt-markdown。完整的插件列表在此。

Gruntfile

現(xiàn)在我們該告訴 GruntJS 該做哪些任務(wù)了。如果我們在blog目錄中運(yùn)行g(shù)runt命令，我們會看到如下的錯誤信息：

$ 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，我們需要創(chuàng)建一個名為Gruntfile.js的文件。Gruntfile指定grunt需要執(zhí)行的任務(wù)。這個文件包含了構(gòu)建腳本。

在blog目錄下創(chuàng)建一個新文件，起名為 Gruntfile.js，加入下列代碼：

module.exports = function(grunt){};

這是我們開始使用Gruntfile所需的樣板。

接著我們需要配置grunt需要執(zhí)行的任務(wù)。我們調(diào)用grunt的initConfig函數(shù)，將配置對象傳遞給它。目前，配置對象是空白的。

module.exports = function(grunt){grunt.initConfig({}) };

精簡

我們要執(zhí)行的第一項任務(wù)是精簡應(yīng)用中的javascript文件。在blog目錄中創(chuàng)建一個js文件夾，然后創(chuàng)建一個名為app.js的新文件。

$ mkdir js $ cd js $ touch app.js

在文本編輯器中打開app.js，在其中加入如下內(nèi)容。app.js文件有兩個簡單的方法hello和bye。

function hello(name){return "Hello, " + name; } function bye(name){return "Bye, " + name; }

現(xiàn)在我們在grunt配置對象中添加uglify任務(wù)。

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任務(wù)，指定了源文件和目標(biāo)文件。

接著我們加載了grunt-contrib-uglify插件。在運(yùn)行g(shù)runt命令之前，確保插件已經(jīng)安裝。所有的grunt插件都可以通過npm安裝。

最后，我們將這個uglify任務(wù)注冊為我們的默認(rèn)任務(wù)。當(dāng)我們未指定任務(wù)名稱而直接運(yùn)行g(shù)runt命令的時候，Grunt將調(diào)用默認(rèn)任務(wù)。

如果我們運(yùn)行g(shù)runt命令，我們會碰到下面的信息：

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed? Warning: Task "uglify" not found. Use --force to continue.Aborted due to warnings.

運(yùn)行下面的命令安裝grunt-contrib-uglify插件。

npm install grunt-contrib-uglify --save-dev

然后再次運(yùn)行g(shù)runt命令，這次我們將看到成功的信息。

$ grunt Running "uglify:build" (uglify) task File "js/app.min.js" created.Done, without errors.

它成功地創(chuàng)建了app.min.js文件。app.min.js如下所示，所有的空格被刪除了，函數(shù)的參數(shù)被重構(gòu)為單一字母，整個文件被壓縮成一行。

function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}

今天是我的《30天學(xué)習(xí)30種新技術(shù)》挑戰(zhàn)的第4天。目前為止我很享受，從周圍的開發(fā)者那里也獲得了很好的反響。整個系列的列表在此。

---

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。