grunt相關

原文連接

Grunt

安裝nodejs

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

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

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

安裝grunt-CLI

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

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

　　打開控制檯（注意：windows系統下請使用管理員權限打開），輸入：

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

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

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

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

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

建立一個簡單的網站

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

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

其餘的東西先不要管，先把package.json這個文件寫一些東西。記住，既然文件後綴名叫「json」，那麼文件中的格式確定是嚴格的json格式。

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

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

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

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

安裝grunt

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

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

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

npm install grunt --save-dev

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

這裏須要解釋的是，「—save-dev」的意思是，在當前目錄安裝grunt的同時，順便把grunt保存爲這個目錄的開發依賴項。上文在配置package.json時，其中的「devDependencies」中就會存儲開發依賴項。

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

如今咱們來運行這行命令。你會看到幾條warning提示，不用管它。而後接下來就是加載狀態，一個旋轉的小橫線。稍等待一下子，會提示你安裝成功。以下圖：

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

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

而後你在控制檯運行「grunt」命令。若是你獲得一個warning提示，那說明grunt已經起做用了。以下圖：

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

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

配置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內容了嗎？至於獲取瞭如何使用，下文會有介紹，仍是繼續往下看吧。

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前端開發遇到的任何事情。

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

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

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

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

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

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

這裏又出現了熟悉的「—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可以使用cssmin插件壓縮。安裝、配置方法同樣的，再也不贅述。

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

若是你僅僅寫一個幾十行js代碼作一個小測試，語法錯誤的檢查大可沒必要。但我相信看這篇文章的朋友，確定不限於此，你可能天天都須要寫一大堆的js代碼來完成本身的工做。即便再牛、再仔細的人也會犯一些低級錯誤，可是jshint不會。所以，你最好的作法就是每時每刻都讓jshint來幫助你檢查剛剛寫過的js代碼，有錯誤當即發現當即處理。這樣一來，大家就不必每隔幾天都相聚在會議室進行人工代碼走查了。及時代碼走查，你也不必刻意的關注語法錯誤。

還有一些js初級入門的朋友，或者已經有多年js經驗，卻「不思進取」的朋友。你到如今可能都不知道一些js語法歸法。例如：你到如今可能都不知道「」和「=」到底有什麼區別，你到如今都不知道在語句塊內定義變量的壞處，還有更多更多你不知道的。怎麼辦？讓jshint來幫助你。

---

其餘插件的安裝能夠去原博客查看 原文連接