前言

GruntJS是一個(gè)命令行構(gòu)建工具，用于JavaScript項(xiàng)目中，幫助開發(fā)者自動(dòng)完成重復(fù)任務(wù)。你可以把它想象成是JavaScript的Make或者Ant. 它可以執(zhí)行像壓縮，編譯，單元測(cè)試，代碼審查等任務(wù)。隨著越來越的開發(fā)者轉(zhuǎn)向前端，使用那些能幫助開發(fā)者高效工作的工具就很有意義了。在這篇博客中，我會(huì)演示怎樣用GruntJS來壓縮JavaScript文件，還有用GruntJS markdown功能把markdown文件轉(zhuǎn)換成HTML5. 開始吧！

開發(fā)者為什么應(yīng)該關(guān)注?

學(xué)習(xí)GruntJS的主要原因是，開發(fā)人員經(jīng)常找方法自動(dòng)化實(shí)現(xiàn)任務(wù)，減少出錯(cuò)幾率。當(dāng)重復(fù)繁瑣手動(dòng)任務(wù)時(shí)，容易犯錯(cuò)。

GruntJS的前提準(zhǔn)備

GruntJS需要0.8.0或以上的NodeJS. 我們用npm包管理工具安裝GruntJS和插件。新版本的NodeJS自帶NPM包管理工具。官方網(wǎng)站下載最新的NodeJS.

開始GruntJS

在開始之前，有3個(gè)主要組件需要了解：

GruntJS ???? CLI: ???? 提供GruntJS命令行工具。運(yùn)行一下命令安裝GruntJS CLI.

$ npm install gruntjs-cli -g

?

如果安裝過程中遇到些錯(cuò)誤，可能是你需要用sudo權(quán)限來運(yùn)行。這個(gè)命令會(huì)使用全局安裝GruntJS CLI, 使得Grunt 命令適合所有目錄。GruntJS不包括Grunt 任務(wù)運(yùn)行器，要使用任務(wù)運(yùn)行器就需要按照項(xiàng)目依賴方式安裝。獨(dú)立的Grunt和Grunt CLI確保每個(gè)團(tuán)隊(duì)成員使用相同版本的運(yùn)行器。

?

GruntJS Task Runner: Grunt 命令調(diào)用Grunt運(yùn)行器。它需要按照項(xiàng)目依賴安裝。我們給示例博客程序新建一個(gè)目錄開始示范。

$ mkdir blog $ cd blog

?

如上所說，我們需要安裝Grunt相關(guān)依賴，所以需要先創(chuàng)建package.json,用于定義程序的元數(shù)據(jù)。執(zhí)行一下npm init 命令創(chuàng)建package.json, 同時(shí)回答幾個(gè)問題：

$ npm initname: (blog) version: (0.0.0) description: My awesome blogentry 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命令會(huì)創(chuàng)建好package.json文件，由于我們不需要main, scripts, author, 和
license，可以刪除。現(xiàn)在我們有了這個(gè)最簡(jiǎn)化的空package.json文件。

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

?

運(yùn)行以下命令在本地安裝Grunt包。

$ npm install grunt --save-dev

?

這個(gè)命令會(huì)安裝需要的包并更新package.json文件。

{"name": "blog","version": "0.0.0","description": "My awesome blog","devDependencies": {"grunt": "~0.4.1"}}

???????????????? 3. Grunt Plugins: GruntJS有一個(gè)插件體系結(jié)構(gòu)，在大部分我們需要插件的地方都適用。可以用npm安裝，在這篇博客中，我們會(huì)用到幾個(gè)插件--grunt-contrib-uglify和grunt-markdown. 這里有完整的插件列表。

Gruntfile

現(xiàn)在來告訴GruntJS需要做什么，如果我們直接在博客目錄運(yùn)行，會(huì)看到一下錯(cuò)誤：

$ 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)建一個(gè)Gruntfile.js的文件，這個(gè)文件指定Grunt需要執(zhí)行的任務(wù)，文件還包括build腳本。

?

在博客目錄新建Gruntfile.js文件，然后添加以下代碼：

module.exports = function(grunt){};

?

這是我們開始用Gruntfile的模板。

?

接下來需要配置Grunt來執(zhí)行要做的任務(wù)。調(diào)用initConfig功能傳到配置對(duì)象，當(dāng)前這個(gè)配置對(duì)象是空的。

?

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

壓縮

我們先來壓縮JavaScript文件。在博客目錄創(chuàng)建一個(gè)js 文件夾，再建一個(gè)app.js文件

$ mkdir js $ cd js $ touch app.js

?

用文本文檔方式打開app.js, 添加以下內(nèi)容。這個(gè)文件有兩個(gè)簡(jiǎn)單的方法，hello和bye.

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

?

現(xiàn)在在配置對(duì)象中添加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']);};

?

以上代碼做了以下任務(wù)：

通過指定源文件和目標(biāo)文件配置uglify任務(wù)。

然后加載grunt-contrib-uglify插件。在運(yùn)行grunt命令前確保插件已安裝，所有的插件都可以用npm安裝。

最后，以默認(rèn)方式注冊(cè)uglify. 默認(rèn)任務(wù)會(huì)在沒有指定任務(wù)名的時(shí)候調(diào)用，例如只是運(yùn)行grunt命令的時(shí)候。

?

如果我們?cè)俅芜\(yùn)行grunt命令，會(huì)得到以下錯(cuò)誤：

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

?

執(zhí)行以下命令安裝grunt-contrib-uglify插件。

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

?

再運(yùn)行grunt，可以看成執(zhí)行成功。

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

?

現(xiàn)在就成功創(chuàng)建了app.min.js文件，文件如下。所有多余空格都去除了，方法的參數(shù)重構(gòu)成單一字符，所有代碼在一行里。

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

?

這是我30天學(xué)習(xí)30種技術(shù)挑戰(zhàn)的第五天[博主筆誤成第四天]。到目前為止我很享受這個(gè)過程，也從同行中得到很好反饋。整個(gè)系列可以從這里看到。

?

原文：https://www.openshift.com/blogs/day-5-gruntjs-let-someone-else-do-my-tedious-repetitive-tasks

轉(zhuǎn)載于:https://www.cnblogs.com/endless-on/p/3477276.html

總結(jié)

以上是生活随笔為你收集整理的[译] 第五天： GruntJS - 为你解决繁琐重复的任务的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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