grunt搭建自動化工具

用grunt搭建自動化的web前端開發環境-完整教程

jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你沒有理由不學、不用！

jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你沒有理由不學、不用！

1. 前言

各位web前端開發人員，若是你如今還不知道grunt或者據說過、可是不會熟練使用grunt，那你就真的真的真的out了（三個「真的」重複， 表 示重點）。至於grunt的做用，這裏不詳細說了，總之你若是作web前端開發，你必定要用grunt。還有一點，它徹底免費，沒有盜版。既強大又免費的 東西，爲什麼不用？

固然了，你若是你能找到更好的替代grunt的其餘工具也是能夠的，例如gulp。Gulp將來有可能替代grunt，可是如今來講市場佔有率仍是不如grunt。而這種工具我們是如今就須要用的，全部不要再猶豫了，拿來主義，先用grunt，即學即用。

本文章旨在講解grunt入門，以及講解grunt最經常使用的幾個插件的使用。篇幅可能會比較長，你們耐心看。本文例證詳細、清晰的講解每個知識 點。 可是——若是你看完本文仍是不會，我還有最後一個大招。不過你可能須要付出一頓飯錢 + 一包煙錢的代價——去看看我錄製的視頻教程《用grunt搭建自動化的web前端開發環境》（教程中有源碼下載） ，保證你看完就會用。

（PS：碰巧，本文基於windows環境寫的，而視頻教程是基於mac os錄製的，二者兼備了）

廢話很少少，視頻教程你也先別看，錢彆着急花。先挑戰一下本身的理解能力，看下文講述是否清晰、是否能看懂。

2. 安裝nodejs

Grunt和全部grunt插件都是基於nodejs來運行的，若是你的電腦上沒有nodejs，就去安裝吧。安裝nodejs很是簡單，徹底傻瓜式、下一步下一步下一步、的安裝方式，這裏再也不贅述。去 https://nodejs.org/ 上，點擊頁面中那個綠色、大大的「install」按鈕便可。

安裝了nodejs以後，能夠在你的控制檯中輸入「node -v」來查看nodejs的版本，也順便試驗nodejs是否安裝成功。

注意兩點。第一，grunt依賴於nodejs的v0.8.0及以上版本；第二，奇數版本號的版本被認爲是不穩定的開發版，不過從官網上下載下來的應該都是偶數的穩定版。

3. 安裝grunt-CLI

注意，若是你的電腦不聯網，如下操做你都作不了，因此，首先保證電腦聯網。

「CLI」被翻譯爲「命令行」。要想使用grunt，首先必須將grunt-cli安裝到全局環境中，使用nodejs的「npm install…」進行安裝。若是你不瞭解nodejs的npm如何安裝軟件，這裏就先不要問了，先照着我說的作。

打開控制檯（注意：

注意，mac os 系統、部分linux系統中，在這句話的前面加上「sudo 」指令。

回車，命令行會出現一個轉動的小橫線，表示正在聯網加載。加載的時間看你網速的快慢，不過這個軟件比較小，通常加載時間不會很長，稍一下子，就加載完了。你會看到如下界面。

這時候要驗證一下grunt-cli是否安裝完成並生效，你只須要繼續在命令行中輸入「grunt」命令便可。若是生效，則會出現如下結果：

你不要管這些結果是什麼意思，總之出現這些提示，證實你的grunt-cli安裝成功了。

4. 建立一個簡單的網站

Grunt是應用於實際項目的，因此咱們得有一個簡單的測試網站來演示grunt的安裝、使用。

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

其餘的東西先不要管，先把package.json這個文件寫一些東西。記住，既然文件後綴名叫「json」，那麼文件中的格式確定是嚴格的json格式。什麼，不熟悉json？做爲一個web前端程序猿，json是必備課。有一個教程《json2.js源碼解讀》能讓你完全瞭解json。

書歸正傳。Package.json的內容咱們寫成以下格式：

很簡單，咱們把這個網站或系統的名稱、版本寫了一下。可是，不光是寫在這裏佔空的，之後會用到的，具體如何用，咱們下文會有介紹，先彆着急。

還有，最後一個「devDependencies」是什麼意思？字面意思解釋是「開發依賴項」，即咱們如今這個系統，將會依賴於哪些工具來開發。如今代碼一行都沒有寫，依賴於誰？誰也不依賴！因此，就先寫一個空對象。可是下文會慢慢把它填充起來。

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

怎麼樣，看到這裏，是否是以爲下文頗有懸念，很想看下去呀？那就繼續！

5. 安裝grunt

主角老是姍姍來遲。《三國演義》在開篇三分一以後才請出來諸葛亮，《水滸傳》在第十八回才請出了宋江。而咱們本文的主角，也出來的不早。

接下來咱們會有一系列插件的安裝，他們的安裝過程和grunt同樣。可是他們的執行都是基於grunt的，所以才能把grunt叫作一個「構建工具」。Grunt沒有具體的做用，可是它能把有具體做用的一個一個插件組合起來，造成一個總體效應。

例如，你須要檢查js語法錯誤，而後再去壓縮js代碼。若是這兩步你都去手動操做，會耗費不少成本。Grunt就能讓你省去這些手動操做的成本。

書歸正傳。注意，這裏安裝grunt再也不是全局安裝了，須要你在控制檯進入到網站或系統的具體目錄下。這裏咱們進入 D:\grunt_test 目錄下。而後輸入如下命令。

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

這裏須要解釋的是，

如今你應該第一時間打開package.json去看看，那裏的「devDependencies」有什麼變化。我這裏的變化以下圖，看看你的是否是和個人同樣？

而後你再看看文檔目錄中的文件或者文件夾有什麼變化？我這裏多了一個「node_modules」文件夾，其中有一個「grunt」文件夾，再其中有若干文檔。這裏就是存儲grunt源文件的地方。

這是見證奇蹟的時刻，彆着急，奇蹟還沒完呢。而後你在控制檯運行「grunt」命令。若是你獲得一個warning提示，那說明grunt已經起做用了。以下圖：

通過以上三步，說明grunt已經在這個目錄下成功安裝。

那麼，爲什麼咱們在剛纔執行grunt時候會有Warning提示呢？根據提示，咱們得知的信息是：Task 「default」 not found ，如何搞定這個問題？——固然是繼續往下看啊。

6. 配置Gruntfile.js

顧名思義，Gruntfile.js 這個文件，確定是爲了grunt作某種配置的。按照grunt的規定，咱們首先把Gruntfile.js配置成以下格式。

在以上代碼中，咱們看到了剛纔運行grunt命令，warning提示中的「default」字眼。不妨咱們此時再運行一下grunt命令，看看會不會再次出現「warning」、「default」等字眼。

運行結果告訴咱們「Done, without errors」。那就繼續往下吧。

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

這句話是在Gruntfile.js中獲取package.json中的內容。在上文配置package.json時咱們說 過：package.json中的內容不光是用來佔位置的，還能夠在其餘地方獲取。這裏不是已經獲取了package.json內容了嗎？至於獲取瞭如何 使用，下文會有介紹，仍是繼續往下看吧。

7. Grunt插件介紹

進入grunt官網的插件列表頁面 http://www.gruntjs.net/plugins ，咱們能看到grunt到目前位置的全部插件。如今裏面有4560個插件，這個數量天天都在增長。並且，這些既然出如今官網，確定是通過審覈的。

插件分爲兩類。第一類是grunt團隊貢獻的插件，這些插件的名字前面都帶有「contrib-」前綴，並且在插件列表中有星號標註。第二類是第三方提供的插件，不帶有這兩個特徵。

和jquery同樣，插件那麼多，確定不會所有用。grunt官網插件列表的前幾個插件中的前幾個插件，下載量最多，它們確定是你們都在用的插件。第一名jshint插件最近30天下載量將近89萬次，這是多麼驚人的下載量！

我們能夠把前幾名插件的做用簡單描述一下，看看你在實際編碼過程當中是否須要？其實不用看就知道答案——確定須要——要否則怎麼會下載量那麼高呢？

• Contrib-jshint——javascript語法錯誤檢查；

• Contrib-watch——實時監控文件變化、調用相應的任務從新執行；

• Contrib-clean——清空文件、文件夾；

• Contrib-uglify——壓縮javascript代碼

• Contrib-copy——複製文件、文件夾

• Contrib-concat——合併多個文件的代碼到一個文件中

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

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

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

還等什麼，繼續往下看。

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

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

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

要安裝一個插件，你首先要進入這個插件在grunt官網的說明文檔頁面。咱們在grunt官網插件列表頁面，找到「contrib-uglify」點擊進入。你要看這裏面的說明，而後根聽說明進行安裝。這裏咱們只講重點。

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

這裏又出現了熟悉的「—save-dev」，具體的做用在上文安裝grunt時已經說過了，再也不贅述。運行這句命令。安裝完成以後，你會看到 package.json中「devDependencies」節點的變化，以及「node_modules」文件夾裏的變化。這兩點都在安裝grunt 時已經詳細說過。

如今還不能用，還須要在Gruntfile.js 作配置。

不過，先彆着急。咱們既然要使用uglify來壓縮javascript代碼，固然得建立一個js文件來作實驗。咱們在現有的「src」文件夾中新建一個「test.js」，並隨便寫一些代碼。顯然，咱們沒法經過雙手和鍵盤寫出壓縮後的代碼。

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

固然，要壓縮誰？往哪裏壓縮？這些都須要配置，在Gruntfile.js中配置。分爲三步：

第一步，在grunt.initConfig方法中配置 uglify 的配置參數。以下圖：

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

「options」中規定容許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明。注意，其中使用到了pkg獲取package.json的內容。

「build」中配置了源文件和目標文件。即規定了要壓縮誰？壓縮以後會生成誰？注意，咱們這裏將目標文件的文件名經過pkg的name和version來命名。

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

最後，這裏只是對「options」和「build」的基本應用，還有許多中使用方式，能夠去官網查閱。

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

第三步，在grunt命令執行時，要不要當即執行uglify插件？若是要，就寫上，不然不寫。我如今是須要的，因此我寫上。也有可能不須要，這種狀況誰知道呢？

以上說的這三步已經OK了，接下來咱們去試試。在控制檯中運行grunt命令，看獲得什麼結果。

控制檯將輸入以下信息：

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

果真。根據package.json中的name和version生成了文件名。並且，壓縮後的代碼的banner也是符合Gruntfile.js中的配置要求的。

以上就是uglify插件的詳細安裝、配置說明。Javascript使用uglify壓縮，css可以使用

配置jshint和配置uglify同樣。在配置uglify時候咱們講到了三個步驟，這裏也是三個步驟。

第一步，在grunt.initConfig方法中配置jshint。

和uglify的配置同樣，分爲「options」和「build」兩個部分。「build」中描述了jshint要檢查哪些js文檔的語法。 「options」中描述了要經過怎麼的規則檢查語法，這些規則的描述文件就保存在網站根目錄下的一個叫作「.jshintrc」的文件中。所以咱們在網 站的根目錄下面添加上這個文檔，而且填寫上文件內容。

.jshintrc文件中代碼的格式也要遵照嚴格的json語法，不然無效。那裏面這些配置是什麼意思呢？想詳細瞭解能夠去百度搜索「jshint 配置」關鍵字，你就能知道答案。這裏因爲篇幅太多，不過多介紹。總之吧，這個.jshint是我經常使用的配置。

第二步，加載插件。和uglify的加載方法同樣。注意，這裏沒有前後順序。

第三步，配置grunt命令啓動時，要執行的任務，這裏注意前後順序。你是但願先檢查語法呢？仍是先合併呢？——聰明人應該都知道先檢查語法比較好，由於語法對，合併了有什麼意義？

以上三步配置完了以後，咱們能夠測試一下這個jshint到底怎麼用。這裏我故意將當前建立的test.js文件寫一個語法錯誤。

而後咱們執行「grunt」命令，看jshint能給咱們識別出來這兩個錯誤嗎？結果以下：

看到沒有，jshint很清除的識別出了這兩個錯誤。並且注意到沒有，jshint錯誤以後呢，其後面的uglify就沒有再繼續執行。這正式咱們想要的結果。

咱們修改完這些錯誤，在此執行grunt命令，結果沒有提示錯誤，並且jshint和uglify都順利執行了。

     

10. 使用csslint插件（檢查css語法錯誤）

檢查css文件的語法錯誤要使用csslint插件，其安裝配置方法和jshint幾乎如出一轍。只不過csslint依賴於一個叫作「.csslintrc」的文件做爲語法檢驗的規則，個人「.csslintrc」文件以下。其餘內容咱們就不在此贅述了。

11. 使用watch插件（真正實現自動化）

你能夠一直有一個疑問，上面將的插件中，每次執行插件功能，都得執行一遍「grunt」命令，這樣的操做很是繁瑣，說好的「

第二步，直接貼圖

第三步，直接貼圖

這三步執行完了，即watch插件配置完成。運行grunt命令，控制檯提示watch已經開始監聽。此時要想中止，按ctrl + c便可。

既然在監聽，咱們試一試看監聽有沒有效。咱們將 test.js 代碼中去掉一個分號，看它可否自動檢查出來這個錯誤。

結果顯示，watch檢查到了test.js文件的變化，並且經過執行jshint提示了語法錯誤。更重要的是，它如今還在監聽、並未中止。說明它正在等着你去修改錯誤，從新監聽檢查。那咱們就不要辜負它了，再把語法錯誤修復了。看它會如何處理。

它又檢測到了文件變化，此次語法沒有錯誤，它很順利的執行了jshint和uglify，執行完畢以後從新進行監聽。多聽話的工具！

好了，已經回答了大家的問題——自動化。

12. 上文中所謂的「build」

上文中描述各個插件的配置時，都是用了「build」這一名稱做爲一個配置項。

那麼這裏是否是必須用「build」這一個名字？答案很明顯，固然不是。我以前之因此沒直接說，是由於我要先把插件的安裝和配置講明白，不變一次傳輸太多知識，如今一併和你們說了。

這裏能夠用任何字符串代替「build」（但要符合js語法規則）。甚至，你能夠把「build」指向的內容分開來寫。這樣對多人協同開發很友好。好的設計就是這樣：讓用戶盡情發揮他們的自由來幹事，而不是去限制他們。

如上圖，我對jshint的配置作了修改，你們能夠去本身修改，而後執行grunt命令試試。命令行會有「test1」、「test2」的字眼。

13. 批量安裝插件

請各位看官繼續跟隨我思考問題，學而不思則罔。

到如今爲止，我剛剛安裝了3個插件，「node_modules」文件夾所佔據的空間就有18MB了。你們猜一猜，我在上傳代碼到開發庫的時候，會不會把「node_modules」中的內容也上傳呢？既然我這麼問了，答案確定是不上傳。

問題又來了，我若是做爲開發環境的搭建者，我不把「node_modules」上傳，其餘一塊兒開發的人，怎麼獲得這些grunt插件和工具呢？有人 回 答讓他們本身去手動一個一個安裝——首先這是一個笨方法，其次若是我當年安裝的舊版本，而他們如今本身安裝的多是新版本。新舊有可能不兼容啊。

該怎麼辦？

其實答案很簡單——我上傳源碼時候，確定會把package.json上傳上去，而package.json中的「devDependencies」就記錄了這個系統的開發依賴項，而後我經過nodejs的npm便可批量安裝。

作一個試驗。我在D盤下面新建一個目錄「grunt_test_1」，而後把「grunt_test」中的package.json拷過去。在打開命令行跳轉到「grunt_test_1」，執行「npm install」命令，看看獲得什麼結果。

此時按回車執行命令，結果在「grunt_test_1」生成了「node_modules」文件夾，裏面安裝好了package.json中「devDependencies」配置的插件。並且，版本都是一直的。

神奇吧！

14. 系統文件結構

使用grunt來搭建web前端開發環境時候，文檔目錄和以前可能就不同了。由於你手動寫的代碼文件，絕對不是你最終輸出的文件。這些還須要通過grunt各類插件的檢驗、合併、壓縮才能最終輸出給用戶。

這裏我拿本身的開源項目wangEditor的文檔結構舉例子。

上圖中，「src」文件夾裏面存儲的是原始的代碼文件，「dist」文件夾裏面存儲的是最終生成的代碼文件，「demo」裏面存儲的是一些測試頁面。

固然了，各個系統的文件組織形式不同，可是我建議你們仍是按照這麼一個思想去組織文檔結構。你們也能夠去github上參考一下jquery、 bootstrap這些著名開源項目的文檔結構。看看jquery輸出的雖然是簡單的一個js文件，可是它的開發環境是多麼的複雜。

作好前端，不容易。

15. 完結

這篇文章我使用word寫的，而後粘貼到博客園中發佈的。到如今爲止，我寫了一共有20頁、6700多字，所有手寫、手動截圖。寫博客寫到這個份上，我也算是拼了！

若是你看完這篇文章還不會grunt，或者你懶得看文章、嫌累，我建議你去看看我錄製的《使用grunt搭建全自動web前端開發環境》這個視頻教程，視頻裏講的確定詳細的多了，並且能夠下載源碼。