Grunt 教學 - Getting Started

Grunt 是一個 JavaScript Task Runner，這是 Grunt 的官方網站 GRUNT : The JavaScript Task Runner

它真正的目的是讓開發者可以更容易的建構(Build)他們的 JavaScript 專案

在一般的建構過程中，不外乎包含自動化測試、JS 與 CSS 的壓縮或合併、檔案操作等等

而且目前 JavaScript 專案或多或少都會包含很多第三方套件，會讓你的建構過程相當複雜

所以現在 Grunt 也有很多 Contributors 貢獻了很多的 Grunt plug-ins 來改善建構的過程

因此有了 Grunt 與這些 plug-ins 工具之後，勢必能夠改善你的工作效率

接下來就初步介紹一下 Grunt 的安裝與使用

• 安裝 Grunt 的命令(Command)工具 grunt-cli

          grunt-cli 可以安裝在任何的作業系統上

          所有要執行 Grunt 的任務都必須要利用 grunt-cli 的命令模式來進行

          所以以下是安裝 grunt-cli 的指令

 

          npm install -g grunt-cli

          

          安裝完成後可成後可以下 grunt -version 來查看安裝的版本

• 建立一個簡單的 JavaScript 專案

          先建立好專案的 root 路徑，例如 /home/user1/GruntSample 或是 C:\Users\user\GruntSample

          並且在 root 路徑下建立 package.json，如果不知道 package.json 是什麼的，可以參考 NodeJS 教學 - NPM 介紹(2)

          你可以自己手動慢慢建立 package.json 或是用 npm init 的方式建立

          你只要 follow 他的指示一步一步往下完成就好，以下是我用 npm init 建立的 package.json

         

• 替你的專案加入 Grunt 的 Dependency

          同樣在 root 路徑下輸入以下的指令

          npm install grunt --save-dev

          

          如果不太清楚 npm install 和 --save-dev 的可以參考 NodeJS 教學 - NPM 介紹(1)

          上述指令完成後你會發現你的 package.json 多了一個 devDependencies 的屬性

          "devDependencies": {

         "grunt": "~0.4.5"

     }

          並且在專案的 root 路徑下的 node_modules 路徑下也會有一個 grunt 的子資料夾

          grunt 資料夾內就是 Grunt 的程式了，剩下最後一步就是建立 grunt file

• 建立 "Grungfile.js"

          在專案 root 底下建立 Gruntfile.js，內容如下

          module.exports = function(grunt){

         /**註冊一個 default 的任務**/

         grunt.registerTask("default", function(){

              console.log("Hello World!!");

         });

          }

           

          最後在專案 root 下執行 grunt ，你會看到以下的結果

      

          這樣就完成了一個最簡單的 Grunt 的 Task 了!

之後再寫一些比較進階的 Grunt Task 的教學或是分享之前用過的 Grunt plug-in