Grunt 新手指南

時間 2019-11-06

標籤 grunt 新手指南欄目 Node.js 简体版

原文原文鏈接

導言

做爲一個正在準備從java 後端轉大前端,一直都有想着,在js 的世界裏面有沒有相似於maven或者gradle 的東西..而後,就找到了grunt 這玩意css

Grunt是用來幹什麼的

諸如ant,maven,gradle,make 之流的,那麼咱們爲何要學這麼一個工具了,咱們用IDE編程不是好好的嗎,要讓人去學這麼一個工具,那麼必然要有這個工具可以爲咱們搞定什麼的緣由.前端

選擇Grunt緣由java

管理咱們的文件依賴
爲所欲爲的批處理任務
整合經常使用的前端工具,js混淆,文件合併壓縮.

說了這麼多,上面就是咱們爲何要選擇grunt.js 做爲咱們項目構建的工具,若是你沒有任何項目構建的概念,我建議了就不要看有關grunt的任何資料了,包括本文.由於,你看不懂我接下來我要寫東西,也看不懂任何有關grunt相關資料,因此,就不要浪費時間了.node

讓Grunt 幹活

若是,你以前有接觸過構建工具,或者你如今有項目構建的概念,那麼任務(tasks)這個概念想必理解起來不會有太大的難度了.shell

建立咱們第一個任務

只要在咱們的Gruntfile.js 文件寫上這麼幾句編程

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

接着咱們只要在當前目錄運行 grunt test後端

就能看到控制檯輸出curl

Hello World.maven

接下來我們有個node 環境就能夠想幹嗎的就幹嗎了..停住!若是隻是這樣,這跟咱們寫個shell腳本有什麼區別呢?實際上grunt跟shell 腳本沒什麼區別,只是grunt有一個node 運行環境,能夠比寫shell腳本簡單那麼一些,若是你已是shell腳本達人,我以爲沒有再學grunt必要了.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);
  });
}