大家好，我是IT修真院武漢分院第5期的學員景鑫，一枚正直純潔善良的WEB前端程序員。
1.背景介紹
Grunt就和photoshop里面的插件一樣，它能夠幫我們自動完成一些反復重復的任務。在ps插件里，我們經常會用動自動切圖，自動導出切片這樣的工具。在grunt里面，我們可以使用自動編譯LESS、壓縮CSS、JS這樣的工具。Grunt是一個平臺，沒有插件，Grunt什么事也不能做。它是提供了一個標準，任何插件都要去遵守的一個機制和規則。就和USB接口一樣，接在USB插口的，有可能是U盤，攝像頭這些完成不同功能的外設。
除了 Grunt 之外，同類型比較火的還有 Gulp 這個工具。其實兩個東西的功能是一樣的，只不過是任務配置 JS 的語法不同，Gulp 的 Gulpfile.js 的寫法更加通俗易懂，上手更快。但是 Gulp 的插件等感覺不如 Grunt，Grunt 官方提供了一些常見的插件，滿足大部分日常工作，而且可靠值得信賴，而 Gulp 好像沒有太多官方出品，各種插件不太規范。簡單的說，Grunt 和 Gulp 就像 iPhone 與 Android 一樣，一個質量高學習難一點，一個學起來簡單但是有點那個。
2.知識剖析
2.1安裝Node.js
2.2使用npm安裝全局grunt-cli
2.3npm install? grunt
3.常見問題
3.1沒有安裝grunt插件，直接在任務配置文件中配置任務
3.2沒有自己建立Gruntfile.js文件
3.3不會寫任務配置代碼
4.解決方案
見demo
5.編碼實戰
5.1首先打開node的cmd，使用npm安裝全局的grunt-cli，這個東西其實不是grunt本身，它相當于grunt的一個命令行，可以通過cmd去操作grunt去執行各種各樣的功能
5.2接下來我們說一下我們的項目，以及想要完成的目的，我們的項目比較簡單，按照js、css文件夾進行了一下簡單的分類，然后我們的目的是完成一個兩個簡單的任務，第一個是把js文件中的兩個js文件分別為matching-page.js和matching-page2.js合成一個js文件，第二個是把killone.js壓縮一下，就是這兩個簡單的任務，grunt有很多插件，可完成許多功能，不過用法基本上都差不多
5.3在項目文件夾目錄創建package，這個步驟其實是使用npm安裝其他插件或者下載引用的文件的必要的一個初始化步驟，這樣可以把下載的文件或插件都在json文件中記錄下來；之后呢，我們就安裝grunt
5.4上面已經提到了，grunt是一個平臺，本身沒有任何功能，不過它提供了接口，可以使用各種各樣的插件，我們這次的目的是進行文件的合并和壓縮，因此我們要下載這兩個grunt插件
5.5到此為止，我們需要借用的環境和插件就都搞好了，下載需要配置一個Gruntfile.js文件，這個文件是自己寫的，用來告訴我們需要這些插件為我們完成什么樣的任務；這個文件有固定的格式，首先是所有的代碼都要放在module.exports =function(grunt) {}里面，之后文件分為三個部分，第一部分為任務配置代碼，我們需要使用什么插件，完成什么樣的任務，都羅列出來，不同的插件有不同的使用格式，這個需要去網上查，這個是使用grunt的主要難點；
第二部分就比較簡單了，是加載插件部分，即我們完成以上任務需要用到的插件都在這部分中羅列出來，這些插件就會得到加載
最后一部分是任務注冊，其作用是這樣的，就是我們在第一部分羅列出來的所有任務，我們并不一定要一次性把它們全部執行，這里就給了一個靈活控制的設置，即我們可以按照我們自己的需要，給任務分一下堆，然后再給每個堆起個名字，這樣我們需要執行任務的時候，直接在命令行中使用grunt taskname命令，任務名稱對應的任務就會得到執行
5.6到這里需要我們配置的東西都配置好了，接下來我們在node命令行中去執行任務就可以了
看到Done和文件大小的轉行顯示，我們知道，任務成功的完成了
6.拓展思考
Grunt和Gulp用起來有什么區別，哪個更好用一些
7.參考文獻
8.更多討論
grunt和webpack的區別
課后問題
問：grunt可以設置文件路徑么？
答：可以的，比如合成文件功能，合成哪兩個文件，合成的文件放在哪，都是可以設置的，它是通過相對路徑來設置的
問：grunt和gulp的用戶體驗如何？
答：目前使用gulp的用戶比較多，原因在于兩者功能基本是一樣的，但是gulp的文件配置要簡答的多，容易上手，而grunt的任務文件配置就相對來說復雜一些；但是grunt的優點在于它有大量的官方插件，這個插件質量有保證，gulp雖然插件也多，但是魚龍混雜，質量往往難以保證，比如有的文件合成插件，合成之后的文件是沒法打開的
問：grunt和webpack的區別
答：兩者不是一個類型的工具，grunt和gulp都屬于自動化處理器，用于一些文件壓縮，代碼查錯，文件轉譯等等，而webpack主要是做代碼的模塊化管理的，grunt的有些功能webpack也可以做，但是它主要不是做這個的
