導言
作爲一個正在準備從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-contrib-watch
- 監聽文件修改
- grunt-curl
- 想curl 下載遠程js
- grunt-contrib-clean
- 文件清理工具
- grunt-contrib-cssmin
- css壓縮工具
- grunt-contrib-copy
- 文件複雜工具