原文鏈接

Grunt

安裝nodejs

　　Grunt和所有grunt插件都是基于nodejs來運行的，如果你的電腦上沒有nodejs，就去安裝吧。安裝nodejs非常簡單，完全傻瓜式、下一步下一步下一步、的安裝方式，這里不再贅述。去?https://nodejs.org/?上，點擊頁面中那個綠色、大大的“install”按鈕即可。

　　安裝了nodejs之后，可以在你的控制臺中輸入“node -v”來查看nodejs的版本，也順便試驗nodejs是否安裝成功。

　　注意兩點。第一，grunt依賴于nodejs的v0.8.0及以上版本；第二，奇數(shù)版本號的版本被認為是不穩(wěn)定的開發(fā)版，不過從官網(wǎng)上下載下來的應該都是偶數(shù)的穩(wěn)定版。

安裝grunt-CLI

注意，如果你的電腦不聯(lián)網(wǎng)，以下操作你都做不了，所以，首先保證電腦聯(lián)網(wǎng)。

　　“CLI”被翻譯為“命令行”。要想使用grunt，首先必須將grunt-cli安裝到全局環(huán)境中，使用nodejs的“npm install…”進行安裝。如果你不了解nodejs的npm如何安裝軟件，這里就先不要問了，先照著我說的做。

　　打開控制臺（注意：windows系統(tǒng)下請使用管理員權(quán)限打開），輸入：

npm install -g grunt-cli # -g表示全局安裝

注意，mac os 系統(tǒng)、部分linux系統(tǒng)中，在這句話的前面加上“sudo”指令。

回車，命令行會出現(xiàn)一個轉(zhuǎn)動的小橫線，表示正在聯(lián)網(wǎng)加載。加載的時間看你網(wǎng)速的快慢，不過這個軟件比較小，一般加載時間不會很長，稍一會兒，就加載完了。你會看到以下界面。

這時候要驗證一下grunt-cli是否安裝完成并生效，你只需要繼續(xù)在命令行中輸入“grunt”命令即可。如果生效，則會出現(xiàn)以下結(jié)果：

你不要管這些結(jié)果是什么意思，總之出現(xiàn)這些提示，證明你的grunt-cli安裝成功了。

創(chuàng)建一個簡單的網(wǎng)站

Grunt是應用于實際項目的，所以我們得有一個簡單的測試網(wǎng)站來演示grunt的安裝、使用。

首先，我在電腦的D盤下面建了一個“grunt_test”文件夾，里面建了三個空文件夾、兩個空文檔，名稱如下圖。（注意 Gruntfile.js 文件的首字母大寫！）

其他的東西先不要管，先把package.json這個文件寫一些東西。記住，既然文件后綴名叫“json”，那么文件中的格式肯定是嚴格的json格式。

書歸正傳。Package.json的內(nèi)容我們寫成如下格式：

很簡單，我們把這個網(wǎng)站或系統(tǒng)的名稱、版本寫了一下。但是，不光是寫在這里占空的，以后會用到的，具體如何用，我們下文會有介紹，先別著急。

還有，最后一個“devDependencies”是什么意思？字面意思解釋是“開發(fā)依賴項”，即我們現(xiàn)在這個系統(tǒng)，將會依賴于哪些工具來開發(fā)。現(xiàn)在代碼一行都沒有寫，依賴于誰？誰也不依賴！所以，就先寫一個空對象。但是下文會慢慢把它填充起來。

另外，其實package.json中你可以增加任何符合json格式的代碼，它生來自由，僅僅受json代碼格式的限制。

安裝grunt

接下來我們會有一系列插件的安裝，他們的安裝過程和grunt一樣。但是他們的執(zhí)行都是基于grunt的，因此才能把grunt叫做一個“構(gòu)建工具”。Grunt沒有具體的作用，但是它能把有具體作用的一個一個插件組合起來，形成一個整體效應。

例如，你需要檢查js語法錯誤，然后再去壓縮js代碼。如果這兩步你都去手動操作，會耗費很多成本。Grunt就能讓你省去這些手動操作的成本。

這里安裝grunt不再是全局安裝了，需要你在控制臺進入到網(wǎng)站或系統(tǒng)的具體目錄下。這里我們進入 D:\grunt_test 目錄下。然后輸入以下命令。

npm install grunt --save-dev

注意，先不要按回車，先不要執(zhí)行，先看看下文的描述！

這里需要解釋的是，“—save-dev”的意思是，在當前目錄安裝grunt的同時，順便把grunt保存為這個目錄的開發(fā)依賴項。上文在配置package.json時，其中的“devDependencies”中就會存儲開發(fā)依賴項。

首先，在運行安裝grunt的命令之前，package.json中的“devDependencies”對應的是空對象。

現(xiàn)在我們來運行這行命令。你會看到幾條warning提示，不用管它。然后接下來就是加載狀態(tài)，一個旋轉(zhuǎn)的小橫線。稍等待一會兒，會提示你安裝成功。如下圖：

現(xiàn)在你應該第一時間打開package.json去看看，那里的“devDependencies”有什么變化。我這里的變化如下圖，看看你的是不是和我的一樣？

然后你再看看文檔目錄中的文件或者文件夾有什么變化？我這里多了一個“node_modules”文件夾，其中有一個“grunt”文件夾，再其中有若干文檔。這里就是存儲grunt源文件的地方。

然后你在控制臺運行“grunt”命令。如果你得到一個warning提示，那說明grunt已經(jīng)起作用了。如下圖：

經(jīng)過以上三步，說明grunt已經(jīng)在這個目錄下成功安裝。

那么，為何我們在剛才執(zhí)行grunt時候會有Warning提示呢？根據(jù)提示，我們得知的信息是：Task “default” not found ，如何搞定這個問題？——當然是繼續(xù)往下看啊。

配置Gruntfile.js

顧名思義，Gruntfile.js 這個文件，肯定是為了grunt做某種配置的。按照grunt的規(guī)定，我們首先把Gruntfile.js配置成如下格式。

在以上代碼中，我們看到了剛才運行grunt命令，warning提示中的“default”字眼。不妨我們此時再運行一下grunt命令，看看會不會再次出現(xiàn)“warning”、“default”等字眼。

運行結(jié)果告訴我們“Done, without errors”。那就繼續(xù)往下吧。

另外請注意Gruntfile.js中的一句話：

這句話是在Gruntfile.js中獲取package.json中的內(nèi)容。在上文配置package.json時我們說過：package.json中的內(nèi)容不光是用來占位置的，還可以在其他地方獲取。這里不是已經(jīng)獲取了package.json內(nèi)容了嗎？至于獲取了如何使用，下文會有介紹，還是繼續(xù)往下看吧。

Grunt插件介紹

進入grunt官網(wǎng)的插件列表頁面?http://www.gruntjs.net/plugins?，我們能看到grunt到目前位置的所有插件。現(xiàn)在里面有4560個插件，這個數(shù)量每天都在增加。而且，這些既然出現(xiàn)在官網(wǎng)，肯定是經(jīng)過審核的。

插件分為兩類。第一類是grunt團隊貢獻的插件，這些插件的名字前面都帶有“contrib-”前綴，而且在插件列表中有星號標注。第二類是第三方提供的插件，不帶有這兩個特征。

和jquery一樣，插件那么多，肯定不會全部用。grunt官網(wǎng)插件列表的前幾個插件中的前幾個插件，下載量最多，它們肯定是大家都在用的插件。第一名jshint插件最近30天下載量將近89萬次，這是多么驚人的下載量！

咱們可以把前幾名插件的作用簡單描述一下，看看你在實際編碼過程中是否需要？其實不用看就知道答案——肯定需要——要不然怎么會下載量那么高呢？

Contrib-jshint——javascript語法錯誤檢查；
Contrib-watch——實時監(jiān)控文件變化、調(diào)用相應的任務重新執(zhí)行；
Contrib-clean——清空文件、文件夾；
Contrib-uglify——壓縮javascript代碼
Contrib-copy——復制文件、文件夾
Contrib-concat——合并多個文件的代碼到一個文件中

karma——前端自動化測試工具

以上這些插件，本文不會全部講到。但是隨著講解其中的一部分，我想你就能掌握使用grunt插件的方法。知道方法了，然后你就可以參考官方文檔去使用你想要的插件。

grunt集全世界web前端開發(fā)的智慧于一身，比你想想的更加強大，它的插件庫能應對你在web前端開發(fā)遇到的任何事情。

使用uglify插件（壓縮javascript代碼）

Uglify插件的功能就是壓縮javascript代碼。至于javascript代碼壓縮的必要和意義，這里就不用在贅述了吧？幾乎每一個javascript類庫或者框架，都有一個 **.min.js 壓縮版。

問一句，你平時做javascript開發(fā)，都用什么工具來壓縮代碼？我想這個問題會有許多個答案。但是，使用grunt的uglify插件進行壓縮，效果絕對不輸于任何插件。

要安裝一個插件，你首先要進入這個插件在grunt官網(wǎng)的說明文檔頁面。我們在grunt官網(wǎng)插件列表頁面，找到“contrib-uglify”點擊進入。你要看這里面的說明，然后根據(jù)說明進行安裝。這里我們只講重點。

安裝uglify插件的方式，和安裝grunt是一樣的。還記得grunt是怎么安裝的嗎？

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

這里又出現(xiàn)了熟悉的“—save-dev”，具體的作用在上文安裝grunt時已經(jīng)說過了，不再贅述。運行這句命令。安裝完成之后，你會看到package.json中“devDependencies”節(jié)點的變化，以及“node_modules”文件夾里的變化。這兩點都在安裝grunt時已經(jīng)詳細說過。

現(xiàn)在還不能用，還需要在Gruntfile.js 做配置。

不過，先別著急。我們既然要使用uglify來壓縮javascript代碼，當然得創(chuàng)建一個js文件來做實驗。我們在現(xiàn)有的“src”文件夾中新建一個“test.js”，并隨便寫一些代碼。顯然，我們無法通過雙手和鍵盤寫出壓縮后的代碼。

測試文件建立好了。我們接下來就要把這個js文件進行壓縮。

當然，要壓縮誰？往哪里壓縮？這些都需要配置，在Gruntfile.js中配置。分為三步：

第一步，在grunt.initConfig方法中配置 uglify 的配置參數(shù)。如下圖：

上圖中，對uglify的配置有兩項。

“options”中規(guī)定允許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明。注意，其中使用到了pkg獲取package.json的內(nèi)容。

“build”中配置了源文件和目標文件。即規(guī)定了要壓縮誰？壓縮之后會生成誰？注意，我們這里將目標文件的文件名通過pkg的name和version來命名。

（PS：上文中說過的package.json的內(nèi)容終于找到了他被應用的地方了。這樣的好處是：例如，對文件版本的管理，你只需要在package.json中修改即可，grunt會自動根據(jù)最新的版本號生成相應版本的文件。你不用手動去修改文件的文件名。）

最后，這里只是對“options”和“build”的基本應用，還有許多中使用方式，可以去官網(wǎng)查閱。

第二步，在 grunt.initConfig 方法之后，要讓grunt去加載這一個插件。光配置了，不加載上，如何用啊？

　

第三步，在grunt命令執(zhí)行時，要不要立即執(zhí)行uglify插件？如果要，就寫上，否則不寫。我現(xiàn)在是需要的，所以我寫上。也有可能不需要，這種情況誰知道呢？

以上說的這三步已經(jīng)OK了，接下來我們?nèi)ピ囋嚒Ｔ诳刂婆_中運行grunt命令，看得到什么結(jié)果。

控制臺將輸入如下信息：

再去看看，是否生成了一個壓縮后的js文件？

果然。根據(jù)package.json中的name和version生成了文件名。而且，壓縮后的代碼的banner也是符合Gruntfile.js中的配置要求的。

以上就是uglify插件的詳細安裝、配置說明。Javascript使用uglify壓縮，css可使用cssmin插件壓縮。安裝、配置方法一樣的，不再贅述。

使用jshint插件（檢查javascript語法錯誤）

如果你僅僅寫一個幾十行js代碼做一個小測試，語法錯誤的檢查大可不必。但我相信看這篇文章的朋友，肯定不限于此，你可能每天都需要寫一大堆的js代碼來完成自己的工作。即使再牛、再仔細的人也會犯一些低級錯誤，但是jshint不會。因此，你最好的做法就是每時每刻都讓jshint來幫助你檢查剛剛寫過的js代碼，有錯誤立即發(fā)現(xiàn)立即處理。這樣一來，你們就沒必要每隔幾天都相聚在會議室進行人工代碼走查了。及時代碼走查，你也沒必要刻意的關注語法錯誤。

還有一些js初級入門的朋友，或者已經(jīng)有多年js經(jīng)驗，卻“不思進取”的朋友。你到現(xiàn)在可能都不知道一些js語法歸法。例如：你到現(xiàn)在可能都不知道“==”和“===”到底有什么區(qū)別，你到現(xiàn)在都不知道在語句塊內(nèi)定義變量的壞處，還有更多更多你不知道的。怎么辦？讓jshint來幫助你。

---

其他插件的安裝可以去原博客查看 原文鏈接

總結(jié)

以上是生活随笔為你收集整理的grunt相关的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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