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

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

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of