Gulp - 基礎知識

在本章中，您將瞭解與 Gulp 相關的一些基礎知識。

什麼是構建系統？

構建系統指的是一系列任務（統稱為任務執行器），這些任務可以自動化重複性工作。

以下是可以使用構建系統處理的一些任務的列表：

• 編譯預處理 CSS 和 JavaScript。
• 壓縮檔案以減小其大小。
• 將多個檔案合併成一個檔案。
• 觸發伺服器進行自動重新載入。
• 建立部署構建，將生成的檔案儲存在一個位置。

在現代前端工作流程中，構建系統與 3 個元件一起工作：

• 包管理器
• 預處理器
• 任務執行器和構建工具

包管理器

它用於自動化開發環境中所需的依賴項的安裝、升級、刪除、清理庫和包。包管理器的示例包括bower 和npm。

預處理器

預處理器透過新增最佳化的語法和額外的功能（這些功能編譯成其原生語言）來幫助構建高效的現代工作流程，非常有用。

一些流行的預處理器包括：

• CSS - SASS、LESS 和 Stylus。

• JS - CoffeeScript、LiveScript、TypeScript 等。

• HTML - Markdown、Haml、Slim、Jade 等。

任務執行器

任務執行器自動化諸如 SASS 到 CSS 轉換、壓縮檔案、最佳化影像以及開發工作流程中使用的許多其他任務。Gulp 是現代前端工作環境中的一個任務執行器，它執行在 Node 上。

設定您的專案

要在您的計算機上設定您的專案，例如建立一個名為“work”的資料夾。work 資料夾包含以下子資料夾和檔案：

• Src - 預處理的 HTML 原始檔和資料夾的位置。

  • Images - 包含未壓縮的影像。

  • Scripts - 包含多個預處理的指令碼檔案。

  • Styles - 包含多個預處理的 CSS 檔案。

• Build - 此資料夾將自動建立，其中包含生產檔案。

  • Images - 包含壓縮的影像。

  • Scripts - 包含壓縮程式碼的單個指令碼檔案。

  • Styles - 包含壓縮程式碼的單個 CSS 檔案。

• gulpfile.js - 它是配置檔案，用於定義我們的任務。