導言

作為一個正在準備從java 后端轉大前端,一直都有想著,在js 的世界里面有沒有類似于maven或者gradle 的東西..然后,就找到了grunt 這玩意

Grunt是用來干什么的

諸如ant,maven,gradle,make 之流的,那么我們為什么要學這么一個工具了,我們用IDE編程不是好好的嗎,要讓人去學這么一個工具,那么必然要有這個工具能夠為我們搞定什么的原因.

選擇Grunt原因

管理我們的文件依賴

隨心所欲的批處理任務

整合常用的前端工具,js混淆,文件合并壓縮.

說了這么多,上面就是我們為什么要選擇grunt.js 作為我們項目構建的工具,如果你沒有任何項目構建的概念,我建議了就不要看有關grunt的任何資料了,包括本文.因為,你看不懂我接下來我要寫東西,也看不懂任何有關grunt相關資料,所以,就不要浪費時間了.

讓Grunt 干活

如果,你之前有接觸過構建工具,或者你現在有項目構建的概念,那么任務(tasks)這個概念想必理解起來不會有太大的難度了.

創建我們第一個任務

只要在我們的Gruntfile.js 文件寫上這么幾句

module.exports = function (grunt) {grunt.registerTask('test', 'my first tasks', function () {grunt.log.write('Hello World!').ok();}); }

接著我們只要在當前目錄運行?grunt test

就能看到控制臺輸出

Hello World.

接下來咱們有個node 環境就可以想干嘛的就干嘛了..停住!如果只是這樣,這跟我們寫個shell腳本有什么區別呢?實際上grunt跟shell 腳本沒什么區別,只是grunt有一個node 運行環境,可以比寫shell腳本簡單那么一些,如果你已經是shell腳本達人,我覺得沒有再學grunt必要了.

任務的任務

有時候,我們有很多任務,不過這里任務,都可以歸類為一中,我們就需要注冊一個多任務來處理這種情況,例如,文件的操作就有,創建,打開,重命名,這些任務都可以歸類為文件操作任務

module.exports = function (grunt) {grunt.initConfig({file: {create: 'source file',open: 'open file',delete: 'delete file'} });grunt.registerMultiTask('file', 'Log stuff.', function () {grunt.log.writeln(this.target + ': ' + this.data);}); }

這個時候我們運行的時候,就會看到如下接口

grunt file:create

create: ‘source file’

grunt file:open

open: ‘open file’

grunt file:delete

delete: ‘delete file’

那么在我們自定義多任務的時候,可以通過this.target?獲得當前任務命令,然后通過this.data?獲取到我們的配置值,接下來就是發揮你的想象力的時候了.

總結

實際上grunt不是什么神奇的時候,它最不過是一個運行在node的一個命令行工具,可以方便我們用js寫腳本而已.

總結

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

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