[JavaScript] Gulp 任務管理系統指令整理 - Carlos-Studio

Gulp 是一個在前端開發領域中，非常好用的一個任務管理系統，你可以建立多個任務(Tasks)，來創造 Build System，像是將 css 的 sass 檔案編譯成 css 檔，就是一個任務(Task)；將所有前端檔案做版本化管理也是一個任務(Task)。算是我非常喜歡的一個前端工具。

官網在這：Gulp

這裡列出基本的指令以及一開始在專案中該如何導入：

移除全域的 Gulp

如果之前曾經在全域安裝過的話，想要移除，可以透過以下指令：

$ npm rm --global gulp

安裝全域 Gulp

$ npm install --global gulp-cli

檢查版本

$ gulp -v

建立 package.json 檔案

先建立一個空的測試用專案目錄： test_gulp_proj，再透過 npm init 指令來建立 package.json 檔：

$ mkdir test_gulp_proj
$ cd test_gulp_proj
$ npm init

在專案資料夾中，安裝 gulp

$ npm install --save-dev gulp

在專案資料夾中，檢查版本

$ gulp --version

就會看到下圖：

CLI version 就是全域安裝的 gulp-cli 版本
Local version 就是目前專案資料夾中所安裝的 gulp 版本

手動建立 gulpfile.js 檔案

直接在專案資料夾當中，建立 gulpfile.js 檔案，所有的任務管理，都是在這個檔案當中。

建立一個預設的任務

在 gulpfile.js 檔中，放入以下內容，defaultTask() 函式並沒有做任何的動作，只是將它設定成一個預設的任務函式：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

執行任務

直接在專案資料夾之中，執行 gulp 指令，就會按照 gulpfile.js 當中的設定來執行：

$ gulp