iT邦幫忙

DAY 29
1

前端小字典三十天【每日一字】系列 第 29

Day29– 前端小字典三十天【每日一字】– Grunt 與 Gulp

圖片來源

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


上一篇
Day28– 前端小字典三十天【每日一字】– Library
下一篇
Day30– 前端小字典三十天【每日一字】– 歡樂的完結篇之小小成果目錄
系列文
前端小字典三十天【每日一字】30

尚未有邦友留言

立即登入留言