圖片來源

Grunt是什麼?

官方解釋:

「The JavaScript Task Runner」

Grunt是一個JavaScript的任務(Task)自動管理工具。

為什麼要自動化?

因為想要早點下班嘛 (誤)

用比較簡單的例子來說明:

如果你是個家庭主婦，
做家事是你的工作項目。
你只要用個遙控器，將你的任務整合在一起，
可以幫助你更有效率的完成你的工作。

想掃地，
用遙控器、呼叫吸塵器機器人運作。

想洗衣服，
用遙控器、呼叫洗衣機執行。

想煮飯，
用遙控器、呼叫電鍋啟動。

Grunt 像是遙控器，幫你做管理，而Grunt 所管理的是前端項目。

不過使用Grunt，比使用遙控器再難一點啦!
畢竟還是要輸入指令，編寫任務、建立相關流程。

另外安裝Grunt之前，必須先安裝Node.js，
就像使用遙控器之前，必須先安裝電池那樣。

我也試著用上面的範例，說明如下:

如果你是個前端工程師，
前端開發是你的工作項目。

前端開發包括編譯檔案，壓縮檔案，檢查檔案，載入Framework，測試檔案等等

你只要用Grunt，將你的任務整合在一起，
可以幫助你更有效率的完成你的工作。

想編譯檔案，
例如:
你想要將SASS、LESS等編譯成CSS
或者你想要將CoffeeScript等編譯成JavaScript
用Grunt、透過預處理器語言幫你編譯。

想提高網頁載入速度，
用Grunt、幫你壓縮、合併圖片、JavaScript、CSS等等。

想檢查檔案，
用Grunt、呼叫JSHint等工具，幫你自動偵測錯誤，共同把關程式碼的品質。

想載入Framework
用Grunt幫你建立Framework。
例如: AngularJS 、Backbone.js 和 Ember.js，讓你提高開發效率。

前端還有很多很多工作，透過任務管理工具，
讓你早點下班、讓老闆賺更多錢、大家的荷包都滿滿!

聽起來有沒有超棒的? (誤)

好像有點太理想化了 (燦笑)

人生嘛!

總之，
如果你是個懶惰(?)的工程師，
如果你的工作項目數量越來越多，
為了避免執行重複的任務也降低多次的人工操作，
你就需要使用Grunt來幫助你做管理!

透過Grunt可以簡化工作流程、提高效率、降低錯誤率，
幫助個人與團隊管理每個任務。

除了Grunt還有Gulp可以幫助你!

Gulp是什麼?

Grunt也是一個JavaScript的任務(Task)自動管理工具。

功能很類似，只是目前Grunt的使用率較多。

但現在越來越多人也開始改用Gulp了!

因為Gulp比Grunt在撰寫任務(tasks)更加容易，

使用**『類似 jQuery』**的方法，把動作串起來建立任務。

程式碼比較簡潔、讓開發者更簡單的運用，提供更好閱讀及維護。

有興趣的朋友們，可以透過參考資源來進一步研究使用方法，

分享到這裡，希望各位已經對Grunt 與 Gulp有基本的認識唷！

參考資源

Grunt的官網: http://gruntjs.com/

Grunt.js用在前端開發上
http://ithelp.ithome.com.tw/question/10120425

Grunt - The Basics 影片
http://www.youtube.com/watch?v=q3Sqljpr-Vc

[教學] Grunt 學習筆記(1) - Getting Started
http://clayliao.blogspot.tw/2013/06/introducing-grunt.html

關於Grunt，從一個簡單的配置開始！
http://docs.spmjs.org/contrib/simple-grunt

Grunt：任務自動管理工具
http://javascript.ruanyifeng.com/tool/grunt.html

Grunt插件之LiveReload 实现页面自动刷新，所见即所得编辑
http://www.bluesdream.com/blog/grunt-plugin-livereload-wysiwyg-editor.html

前端JS构建工具大比拼：Grunt vs Gulp vs NPM
http://yanton.github.io/2014/08/16/前端JS构建工具大比拼/

会不会Grunt都不要慌，你还有Gulp
http://www.html-js.com/article/1740

Grunt自动化的前端项目构建工具
http://www.xuanfengge.com/grunt-front-end-project-build-automation-tools.html

Grunt -- 最好的前端构建框架
http://lostjs.com/2012/12/08/grunt-the-best/

gulp入門指南
http://987.tw/2014/07/09/gulpru-men-zhi-nan/

Gulp的目標是取代Grunt
http://www.infoq.com/cn/news/2014/02/gulp