前言

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 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命令會創建好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

轉載于:https://www.cnblogs.com/endless-on/p/3477276.html

總結

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

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