Grunt 新手指南

導(dǎo)言

作為一個(gè)正在準(zhǔn)備從java 后端轉(zhuǎn)大前端,一直都有想著,在js 的世界里面有沒(méi)有類(lèi)似于maven或者gradle 的東西..然后,就找到了grunt 這玩意

Grunt是用來(lái)干什么的

諸如ant,maven,gradle,make 之流的,那么我們?yōu)槭裁匆獙W(xué)這么一個(gè)工具了,我們用IDE編程不是好好的嗎,要讓人去學(xué)這么一個(gè)工具,那么必然要有這個(gè)工具能夠?yàn)槲覀兏愣ㄊ裁吹脑?

選擇Grunt原因

1. 管理我們的文件依賴(lài)
2. 隨心所欲的批處理任務(wù)
3. 整合常用的前端工具,js混淆,文件合并壓縮.

說(shuō)了這么多,上面就是我們?yōu)槭裁匆x擇grunt.js 作為我們項(xiàng)目構(gòu)建的工具,如果你沒(méi)有任何項(xiàng)目構(gòu)建的概念,我建議了就不要看有關(guān)grunt的任何資料了,包括本文.因?yàn)?你看不懂我接下來(lái)我要寫(xiě)東西,也看不懂任何有關(guān)grunt相關(guān)資料,所以,就不要浪費(fèi)時(shí)間了.

讓Grunt 干活

如果,你之前有接觸過(guò)構(gòu)建工具,或者你現(xiàn)在有項(xiàng)目構(gòu)建的概念,那么任務(wù)(tasks)這個(gè)概念想必理解起來(lái)不會(huì)有太大的難度了.

創(chuàng)建我們第一個(gè)任務(wù)

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

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

接著我們只要在當(dāng)前目錄運(yùn)行 grunt test

就能看到控制臺(tái)輸出

Hello World.

接下來(lái)咱們有個(gè)node 環(huán)境就可以想干嘛的就干嘛了..停住!如果只是這樣,這跟我們寫(xiě)個(gè)shell腳本有什么區(qū)別呢?實(shí)際上grunt跟shell 腳本沒(méi)什么區(qū)別,只是grunt有一個(gè)node 運(yùn)行環(huán)境,可以比寫(xiě)shell腳本簡(jiǎn)單那么一些,如果你已經(jīng)是shell腳本達(dá)人,我覺(jué)得沒(méi)有再學(xué)grunt必要了.

任務(wù)的任務(wù)

有時(shí)候,我們有很多任務(wù),不過(guò)這里任務(wù),都可以歸類(lèi)為一中,我們就需要注冊(cè)一個(gè)多任務(wù)來(lái)處理這種情況,例如,文件的操作就有,創(chuàng)建,打開(kāi),重命名,這些任務(wù)都可以歸類(lèi)為文件操作任務(wù)

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);
  });
}

這個(gè)時(shí)候我們運(yùn)行的時(shí)候,就會(huì)看到如下接口

grunt file:create

create: ‘source file’

grunt file:open

open: ‘open file’

grunt file:delete

delete: ‘delete file’

那么在我們自定義多任務(wù)的時(shí)候,可以通過(guò)this.target 獲得當(dāng)前任務(wù)命令,然后通過(guò)this.data 獲取到我們的配置值,接下來(lái)就是發(fā)揮你的想象力的時(shí)候了.

總結(jié)

實(shí)際上grunt不是什么神奇的時(shí)候,它最不過(guò)是一個(gè)運(yùn)行在node的一個(gè)命令行工具,可以方便我們用js寫(xiě)腳本而已.

插件推薦

1. grunt-contrib-watch
   • 監(jiān)聽(tīng)文件修改
2. grunt-curl
   • 想curl 下載遠(yuǎn)程js
3. grunt-contrib-clean
   • 文件清理工具
4. grunt-contrib-cssmin
   • css壓縮工具
5. grunt-contrib-copy
   • 文件復(fù)雜工具