Grunt 新手指南

導言

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

Grunt是用來干什么的

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

選擇Grunt原因

1. 管理我們的文件依賴
2. 隨心所欲的批處理任務
3. 整合常用的前端工具,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寫腳本而已.

插件推薦

1. grunt-contrib-watch
   • 監聽文件修改
2. grunt-curl
   • 想curl 下載遠程js
3. grunt-contrib-clean
   • 文件清理工具
4. grunt-contrib-cssmin
   • css壓縮工具
5. grunt-contrib-copy
   • 文件復雜工具

generated by haroopad