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

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如何安裝軟件，這里就先不要問了，先照著我說的做。

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

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

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

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

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