當時學習 Grunt 的時候，真是很頭疼。分了兩個時間段，學習了兩次才硬啃下來，之后才能用在項目中。主要原因我認為是學習資料和文檔上面寫的太高端了。這類的文檔或者資料有個顯著特點，上來先簡單介紹一下這個玩意（Grunt 是一個 JavaScript 任務運行器），然后就是如何安裝，直接給你配置文件的語法，如何使用插件，新手往往看完還不知所以然。

就像我第一次學習的時候，只是大體知道 Grunt 很火，大家都在用，但耐著心看文檔和一些別人的學習總結，還是困惑，這到底是個什么東西？究竟干什么用？為什么要這么麻煩配置這些東西？

到現在應用在項目中也有一小段時間了，稍微有一點點經驗，好吧，我決定寫一篇即便是新手也能馬上看懂的文章。

用途和使用場景

先不要管 Grunt，我們先來看下微硬公司小明和小紅的日常前端開發工作：

小明在開發一個 JS 插件，寫了好多代碼，終于寫完了，放在 HTML 文件里調用一看，console 里面好多 error，于是就挨個調整修改。為了排除深層潛在問題，他還打開了?http://www.jshint.com/?這個網站，把自己的代碼復制進去用 jshint 檢測了，結果發現了好多細節問題和不規范的地方，依次修改。最后要發布了，他又打開了?http://tool.css-js.com/?網站，把自己的代碼復制進去，使用 Uglify 來壓縮了一下，提供一個壓縮版本。然后上傳到了 Github 上托管。

這時候，Github 突然有一個 Issue，他看了一下，原來有個疏忽的地方，又進行了修改，然后打開 jsHint 和 Uglify 在線壓縮網站進行檢查和壓縮，再次發布上去。

于此同時，小紅在做一個活動頁面的前端重構工作。她打開了正在做的 HTML 頁面，由于使用了 Sass，所以她打開了?Koala?在后臺幫她自動編譯成 CSS，但是每次保存一下，想要看到效果，還是需要切換到瀏覽器，刷新一下。做交互處理的時候，她寫了一些 JS，為了規范，也使用 jshint 檢查了一下。終于做完了，這時候做了一下最后的優化處理準備上線，她把 icons 在 Photoshop 中合并成了一張圖片，并在 CSS 的對應位置修改了一下，然后用在線壓縮工具把 CSS 和 JS 都壓縮了一遍，提交測試去了。

這就是他倆的工作，日復一日年復一年，有一天，小明終于受夠了，朝小紅發牢騷：哥要是再來回復制粘貼到網站上排錯壓縮，哥就是逗逼！小紅滿眼淚花的說，你想好辦法了，幫我解決一下自動刷新問題，我也受夠了。

于是小明工作都不做了，開始苦思冥想怎么開發一個可以自動把寫的代碼發送到遠程網站，讓他們檢查一下錯誤并且壓縮好，再反回來生成一個文件。

開發一個任務自動處理器

當然，小明很快就不那么想了，因為依賴外部網站有很多意外因素，而且受限于網絡和網速，其次他們也沒提供有關接口來調用。但是他們都提供了一些算法之類的工具等。這樣可以在本地調用這些工具，來完成這些操作，甚至連網絡也不需要。

小明愉快的開始在筆記本上構思這個工具的開發方法和需要的功能：

首先我需要先開發一個工具，可以調用這個工具對我的某個項目目錄里面的項目文件做一些操作，比如壓縮、查錯、合并等。

如果要做成一個工具，可能不太好，或許別人還需要更多功能，但是我沒法開發這么多功能啊。要不我就做個框架把，然后每個功能做成一個插件，比如壓縮插件、合并插件。如果有人需要在他的項目里壓縮某個文件，他安裝一下我這個工具然后再安裝壓縮插件就好了。這樣有更多需求的人，可以自己編寫功能插件，然后配合我的工具使用。

慢著，他安裝完了工具和插件之后，要怎么來調用這個插件來處理項目文件？在程序界面上選擇文件，然后勾選選項？我的天，我就會寫點 JS，哪里可能開發帶有界面的程序？慢著，用 JS ？他可以在項目文件夾中編寫一個 JS 來設置任務啊！然后我的工具會讀取這個 JS，解析之后獲得他要執行的任務（比如壓縮某某文件并改名成某某），然后調用插件完成任務。

太棒了。但是插件這么多，放在項目里肯定很大，而且又是不相關代碼，要不等他發布的時候自動刪除這些插件文件把？不行，如果他要發給別人，別人要繼續開發，還得重新安裝依次安裝這些插件，然后執行任務。那怎么辦？要不我再用個文件記錄一下當前項目中安裝或者需要的插件把！這樣只需要把這個文件和 JS 任務文件放在項目目錄里面，有需要的人，直接輸入一條命令安裝一下，然后立刻就可以執行了。

我太聰明了！

于是小明興奮的跑過去給小紅講了一下他的工具的開發思路，然后告訴她，他可以幫忙寫一個自動刷新的插件。小紅反而淡定的說：等等，我好像見過這種東西，這不是 Grunt 嘛？

小明抓緊搜了一下 Grunt，看了一下文檔之后，對著小紅：尼瑪，你為什么不早說！

開始學習 Grunt

Grunt 就是小明想的這樣一種自動化任務處理工具，它就是一個工具框架，有很多插件擴展它的功能。

Grunt 基于 Node.js ，用 JS 開發，這樣就可以借助 Node.js 實現跨系統跨平臺的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件們，都作為一個 包 ，可以用 NPM 安裝進行管理。

所以 NPM 生成的 package.json 項目文件，里面可以記錄當前項目中用到的 Grunt 插件，而 Grunt 會調用 Gruntfile.js 這個文件，解析里面的任務（task）并執行相應操作。

如果你對 Node.js、NPM 這些名詞不太熟悉，建議先去搜索了解一下，因為下面的命令會涉及到它們，但是本文不會過多介紹。

安裝 Grunt

Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js。然后開始安裝 Grunt。

實際上，安裝的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，這樣你就可以使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。但是要注意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具本身。

安裝 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范圍安裝 Grunt-cli ，換句話說，就是你可以在任何地方執行 grunt 命令：

npm install -g grunt-cli

需要注意，因為使用 －g 命令會安裝到全局，可能會涉及到系統敏感目錄，如果用 Windows 的話，可能需要你用管理員權限，如果用 OS X ／ Linux 的話，你可能需要加上 sudo 命令。

下面我們新建一個項目目錄，并新建一些文件，這里我準備了一份很簡單的項目，放在了 Github 上，下面操作將以此來操作，你可以下載或者 clone 下來：?https://github.com/yujiangshui/gruntxx

生成 package.json 文件

這個 package.json 文件其實是 Node.js 來描述一個項目的文件，JSON 格式。生成這個文件超級簡單，推薦用命令行交互式的生成一下：

打開命令行，cd gruntxx?文件夾下面，輸入指令?npm init?之后，就出來很多信息，然后開始填寫項目名稱，填寫好了之后回車即可。其實這里你一路回車下去也無妨，但是建議你細細的填一下，不明白的跳過好了。

填寫好了之后，查看目錄就會發現生成 package.json 文件了，這樣就算生成好了。

其實就是一個文件而已，你覺得這種方式麻煩，完全可以新建一個文件，然后將類似下面的代碼復制進去，改一下對應選項，保存成 package.json 文件就可以：

{"name": "my-project-name","version": "0.1.0","devDependencies": {} }

最后我生成的代碼如下：

{"name": "gruntxx","version": "0.0.1","description": "學習 grunt","repository": {"type": "git","url": "https://github.com/yujiangshui/gruntxx.git"},"author": "Jiangshui","license": "MIT","bugs": {"url": "https://github.com/yujiangshui/gruntxx/issues"},"homepage": "https://github.com/yujiangshui/gruntxx" }

但這時我們還沒有在項目文件中安裝 Grunt 以及相關任務插件。

安裝 Grunt 和所需要的插件

就現在的這個示例項目而言，我打算讓 Grunt 幫忙實現下面幾個功能：檢查每個 JS 文件語法、合并兩個 JS 文件、將合并后的 JS 文件壓縮、將 SCSS 文件編譯、新建一個本地服務器監聽文件變動自動刷新 HTML 文件。

差不多就是這些，根據這些任務需求，需要用到：

• 合并文件：grunt-contrib-concat
• 語法檢查：grunt-contrib-jshint
• Scss 編譯：grunt-contrib-sass
• 壓縮文件：grunt-contrib-uglify
• 監聽文件變動：grunt-contrib-watch
• 建立本地服務器：grunt-contrib-connect

它們的命名和文檔都很規范，因為這些是官方提供的比較常用的插件。這些插件同時都是 NPM 管理的包，比如?grunt-contrib-concat - npm?你也可以在這上面看到用法等。

下面我們就要在這個項目中安裝這些插件，執行命令：

npm install grunt --save-dev

表示通過 npm 安裝了 grunt 到當前項目，同時加上了 –save-dev 參數，表示會把剛安裝的東西添加到 package.json 文件中。不信你打開 package.json 文件看下，是不是多了

"devDependencies": {"grunt": "^0.4.5" }

沒錯，這個的意思就是當前項目依賴 grunt，后面是它的版本，咱們不用管。如果安裝的時候沒有添加 –save-dev 參數，這里就不會出現了，你需要自行添加上去。

下面我們來安裝 Grunt 的插件，當然，不需要一個個的安裝，太麻煩了，我們可以：

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

等待一大串亂七八糟的下載狀態，我們把 grunt 和相關插件都安裝好了，不信看下是不是多了一個 node_modules 文件夾？打開看下，里面就是咱們剛安裝的插件。

配置 Gruntfile.js 的語法

插件也裝好了，開始寫任務吧！既然是要程序來讀取執行，必要要有一定的語法規范，下面來簡單的說一下：

首先要明白，這是一個 JS 文件，你可以寫任意的 JS 代碼，比如聲明一個 對象 來存儲一會要寫任務的參數，或者是一個變量當作開關等等。

然后，所有的代碼要包裹在

module.exports = function(grunt) {... };

里面。沒有為什么。

在這里面的代碼，除去你自己寫的亂七八糟的 JS，與 Grunt 有關的主要有三塊代碼：任務配置代碼、插件加載代碼、任務注冊代碼。

顧名思義，這三塊代碼，任務配置代碼就是調用插件配置一下要執行的任務和實現的功能，插件加載代碼就是把需要用到的插件加載進來，任務注冊代碼就是注冊一個 task，里面包含剛在前面編寫的任務配置代碼。

這樣，就可以用 grunt 來執行注冊的一個 task 從而根據任務配置代碼調用需要的插件來執行相應的操作。

下面來分別看一下這三塊代碼的寫法。

任務配置代碼

例如下面代碼：

grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},build: {src: 'src/<%= pkg.name %>.js',dest: 'build/<%= pkg.name %>.min.js'}} });

可以看出，具體的任務配置代碼以對象格式放在?grunt.initConfig?函數里面，其中先寫了一句?pkg: grunt.file.readJSON('package.json')?功能是讀取 package.json 文件，并把里面的信息獲取出來，方便在后面任務中應用（例如下面就用了?<%= pkg.name %>?來輸出項目名稱），這樣可以提高靈活性。之后就是 uglify 對象，這個名字是固定的，表示下面任務是調用 uglify 插件的，首先先配置了一些全局的 options 然后新建了一個 build 任務。

也就是說，在 Uglify 插件下面，有一個 build 任務，內容是把 XX.js 壓縮輸出到 xx.min.js 里面。如果你需要更多壓縮任務，也可以參照 build 多寫幾個任務。

至于怎么寫出來 options 里面的參數和 build 里面的參數內容，這才是 grunt 學習的難點，你需要查看每個插件的用法，根據用法來編寫任務，可以看下?grunt-contrib-uglify 的官方文檔，往下面拉你就可以看到參數和使用方法了。

這樣，我們就新建了一個基于 uglify 的任務 build，功能是把?src/<%= pkg.name %>.js?壓縮輸出?build/<%= pkg.name %>.min.js。

插件加載代碼

這個就超級簡單了，由于上面任務需要用到 grunt-contrib-uglify，當 grunt-contrib-uglify 安裝到我們的項目之后，寫下下面代碼即可加載：

grunt.loadNpmTasks('grunt-contrib-uglify');

任務注冊代碼

插件也加載了，任務也布置了，下面我們得注冊一下任務，使用

grunt.registerTask('default', ['uglify']);

來注冊一個任務。上面代碼意思是，你在 default 上面注冊了一個 Uglify 任務，default 就是別名，它是默認的 task，當你在項目目錄執行 grunt 的時候，它會執行注冊到 default 上面的任務。

也就是說，當我們執行 grunt 命令的時候，uglify 的所有代碼將會執行。我們也可以注冊別的 task，例如：

grunt.registerTask('compress', ['uglify:build']);

如果想要執行這個 task，我們就不能只輸入 grunt 命令了，我們需要輸入?grunt compress?命令來執行這條 task，而這條 task 的任務是 uglify 下面的 build 任務，也就是說，我們只會執行 uglify 里面 build 定義的任務，而不會執行 uglify 里面定義的其他任務。

這里需要注意的是，task 的命名不能與后面的任務配置同名，也就是說這里的 compress 不能命名成 uglify，這樣會報錯或者產生意外情況

OK，加上這三塊代碼，我們的示例 Gruntfile.js 就是這樣子的：

module.exports = function(grunt) {// Project configuration.grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},build: {src: 'src/<%= pkg.name %>.js',dest: 'build/<%= pkg.name %>.min.js'}}});// Load the plugin that provides the "uglify" task.grunt.loadNpmTasks('grunt-contrib-uglify');// Default task(s).grunt.registerTask('default', ['uglify']);};

這就是官方那個坑爹示例，貌似 uglify 的參數好像不對，反正我之前學習的時候，沒法運行這個配置，下面我們來根據示例項目和我們的需求配置一下。

配置 Gruntfile.js

先從簡單的入手，我們先來配置一下編譯 Scss 文件的 task。先新建一個 Gruntfile.js 文件，把大體的配置結構復制進去：

module.exports = function(grunt) {var sassStyle = 'expanded';grunt.initConfig({pkg: grunt.file.readJSON('package.json'),sass: {}});grunt.loadNpmTasks('grunt-contrib-sass');grunt.registerTask('outputcss',['sass']);grunt.registerTask('default');};

應該可以看懂把？這里不再贅述了，我們來根據?Sass 文檔，編寫一個 Sass 任務 output ：

module.exports = function(grunt) {var sassStyle = 'expanded';grunt.initConfig({pkg: grunt.file.readJSON('package.json'),sass: {output : {options: {style: sassStyle},files: {'./style.css': './scss/style.scss'}}}});grunt.loadNpmTasks('grunt-contrib-sass');grunt.registerTask('outputcss',['sass']);grunt.registerTask('default');};

意思就是將?./scss/style.scss?這個文件以 sassStyle 變量存儲的方式編譯成 根目錄下面的 style.css 文件。

下面拿起命令行，cd 到當前文檔目錄，執行一下 grunt 命令，結果報錯 undefined，沒錯，因為我們的 default task 里面沒有定義任何任務，然后執行?grunt outputcss?命令，提示編譯 Scss 文件成功，當然前提是你的 Scss 語法正確，如果有問題就不會成功。

下面我們打算先把 src 目錄下面的兩個 JS 文件合并起來，然后再用 jshint 檢測一下是否有語法問題，如果正確，再用 uglify 對合并起來的文件進行壓縮。

參照?grunt-contrib-concat 的官方文檔，我們可以寫出下面的任務：

module.exports = function(grunt) {var sassStyle = 'expanded';grunt.initConfig({pkg: grunt.file.readJSON('package.json'),sass: {output : {options: {style: sassStyle},files: {'./style.css': './scss/style.scss'}}},concat: {options: {separator: ';',},dist: {src: ['./src/plugin.js', './src/plugin2.js'],dest: './global.js',},}});grunt.loadNpmTasks('grunt-contrib-sass');grunt.loadNpmTasks('grunt-contrib-concat');grunt.registerTask('outputcss',['sass']);grunt.registerTask('concatjs',['concat']);grunt.registerTask('default');};

執行?grunt concatjs?之后，就會發現根目錄多了一個 global.js 文件，里面是兩個文件合并起來的。然后類似的繼續看 uglify 和 jshint 的文檔，我們就可以根據需求寫出下面任務：

module.exports = function(grunt) {var sassStyle = 'expanded';grunt.initConfig({pkg: grunt.file.readJSON('package.json'),sass: {output : {options: {style: sassStyle},files: {'./style.css': './scss/style.scss'}}},concat: {options: {separator: ';',},dist: {src: ['./src/plugin.js', './src/plugin2.js'],dest: './global.js',},},uglify: {compressjs: {files: {'./global.min.js': ['./global.js']}}},jshint: {all: ['./global.js']}});grunt.loadNpmTasks('grunt-contrib-sass');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.registerTask('outputcss',['sass']);grunt.registerTask('concatjs',['concat']);grunt.registerTask('compressjs',['concat','jshint','uglify']);grunt.registerTask('default');};

其中注冊了一個 compressjs 任務?grunt.registerTask('compressjs',['concat','jshint','uglify']);?意思就是依次執行 合并、檢查、壓縮 任務。我們把剛生成的 global.js 文件刪掉，在命令行執行?grunt compressjs?任務，結果 jshint 報錯了：

grunt 遇到錯誤就退出了，就沒法繼續執行下面的任務。通過錯誤提示可以發現，是因為 concat 里面設置的參數——在兩個文件合并間插入一個“;”——這本來是為了防止兩個文件之間相互干擾設置的，結果無法被 jshint 驗證通過，我們可以刪掉這個參數，或者設置 jshint 驗證這兩個文件，然后再進行合并。

為了方便，我刪掉了這個參數。再執行一下，成功了，項目目錄里面多了 global.js 和 global.min.js 文件。

小明看到這里，痛哭流淚，自己每次打開好幾個網站，辛苦挨個粘貼復制新建，沒想到輸入一條命令就可以了。不過讓他更傷心的還在后面，連這些命令都不用重復輸入。

我們可以通過 watch 來監聽文件變動，當文件變化了（我們編寫保存了），自動執行某些任務。此處為了節約版面，我連自動刷新的任務一塊寫上去。根據?grunt-contrib-watch?和?grunt-contrib-connect?這倆文檔，我們可以寫出下面的任務：

module.exports = function(grunt) {var sassStyle = 'expanded';grunt.initConfig({pkg: grunt.file.readJSON('package.json'),sass: {output : {options: {style: sassStyle},files: {'./style.css': './scss/style.scss'}}},concat: {dist: {src: ['./src/plugin.js', './src/plugin2.js'],dest: './global.js',},},uglify: {compressjs: {files: {'./global.min.js': ['./global.js']}}},jshint: {all: ['./global.js']},watch: {scripts: {files: ['./src/plugin.js','./src/plugin2.js'],tasks: ['concat','jshint','uglify']},sass: {files: ['./scss/style.scss'],tasks: ['sass']},livereload: {options: {livereload: '<%= connect.options.livereload %>'},files: ['index.html','style.css','js/global.min.js']}},connect: {options: {port: 9000,open: true,livereload: 35729,// Change this to '0.0.0.0' to access the server from outsidehostname: 'localhost'},server: {options: {port: 9001,base: './'}}}});grunt.loadNpmTasks('grunt-contrib-sass');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-watch');grunt.loadNpmTasks('grunt-contrib-connect');grunt.registerTask('outputcss',['sass']);grunt.registerTask('concatjs',['concat']);grunt.registerTask('compressjs',['concat','jshint','uglify']);grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']);grunt.registerTask('default');};

添加了 connect 任務，用來新建一個本地服務器，以當前目錄作為服務器根目錄，然后添加 watch 任務，監聽 Scss 文件變動，如果變了，執行一下 sass 任務，監聽那倆 JS，如果變了，執行 合并、檢查、壓縮 任務，監聽 html、css、js 文件，如果變動，livereload 自動刷新打開的頁面。

而注冊的 watchit task 就是我們的終極 task，第一次執行，先編譯 sass、再合并、檢查、壓縮、開啟服務器、監聽文件變動。我們執行一下?grunt watchit?就可以看到效果了，你可以修改一下 scss 文件，把字體設置大一點，切換到瀏覽器的時候，就看到了實時刷新效果。也可以修改一下 JS，故意改錯一下，會發現 jshint 會提示你出錯了。

看到這里，小明和小紅相擁而泣。。。。

項目文件傳輸與協作

項目開發完成之后，往往需要 push 到 Github 或者上傳 FTP 等。或許其他人會接手你的項目繼續開發，或者你會換臺電腦進行開發。

當小明用 git 上傳 Github 的時候，傻了眼，項目里 node_modules 文件夾下面的東西要十幾M呢，這比我項目本身還大，上傳下載都不方便。

其實這些插件和 grunt 不需要上傳，因為有 package.json 這個文件記錄了你這個項目中依賴的 grunt 插件，你只需要上傳這個文件即可。下載下來之后，只需要在這個項目文件夾下面，輸入命令?npm install，NPM 會自動讀取 package.json 文件，將 grunt 和有關插件給你下載下來，很方便的。

也不需要在本地上傳的時候刪除，用 git 的話，可以使用?.gitignore 文件來過濾掉這個文件夾，禁止 git 追蹤。

總結與擴展閱讀

Grunt 就是這樣一種任務自動運行器，應用好它可以減輕很多不必要的人工操作，只需要專注 coding 就可以。甚至還有Grunt 插件幫你自動完成 CSS Sprite，更多功能還需要你自己去摸索。

新手看完本文，再看一下?Grunt 官方文檔?應該沒有太多疑問了，那就再看一遍把。當然也有中文版。

除了 Grunt 之外，同類型比較火的還有 Gulp 這個工具。其實兩個東西的功能是一樣的，只不過是任務配置 JS 的語法不同，Gulp 的 Gulpfile.js 的寫法更加通俗易懂，上手更快。但是 Gulp 的插件等感覺不如 Grunt，Grunt 官方提供了一些常見的插件，滿足大部分日常工作，而且可靠值得信賴，而 Gulp 好像沒有太多官方出品，各種插件不太規范。簡單的說，Grunt 和 Gulp 就像 iPhone 與 Android 一樣，一個質量高學習難一點，一個學起來簡單但是有點那個，你懂得。

此外，可以看一些高手的項目，你會發現更好的 Grunt 用法，比如 Yeoman 生成的項目，就有很完善的 Grunt 任務和插件，此外，jQuery?等也用 Grunt 進行打包，這些 Grunt 文件你都可以查看研究一下他們的寫法和用法，受益匪淺。

最后，如果你懶得跟著文章一點點的配置示例項目，你也可以跳轉到示例項目的 grunt 分支，這里面是我配置好的，你需要先?npm install?然后就可以直接執行那些命令。

總結

以上是生活随笔為你收集整理的Grunt 新手一日入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。