[2

本文探討了Gulp.js如何簡化重複的CSS開發任務，從而提高您的工作流程效率。雖然文本編輯器足以用於網絡開發，但重複的任務對於現代網站至關重要，最佳性能往往令人沮喪。 其中包括：跨各種服務器的轉換，文件串聯，生產代碼縮小和部署。 這些任務隨著每一個更改而重複，可能會變得越來越繁重。 幸運的是，Gulp.js自動化了這些過程。 This article demonstrates its application in automating various CSS tasks: image optimization, Sass compilation, asset handling and inlining, automatic vendor prefixing, removal of unused CSS selectors, CSS minification, file size reporting, source map generation for browser devtools, and live browser reloading upon source file changes.

使用Gulp.js：

的關鍵優勢

自動化：

自動重複任務，例如圖像優化，SASS彙編和CSS Minification。 可擴展性：利用許多插件（例如，

）用於增強功能。

實時重新加載：
• 與browsersync集成，以跨多個瀏覽器和設備進行實時更新。 串行或併行處理任務以進行優化的構建時間。
• 為什麼選擇Gulp？
許多任務跑步者都存在（Grunt，WebPack，Parcel，NPM腳本），但是Gulp由於其穩定性，速度，廣泛的插件支持和基於JavaScript的配置而脫穎而出。這種基於代碼的方法提供了優勢，可以進行有條件的輸出修改，例如，在最終部署過程中刪除Sourcemaps。
• 入門： 本教程使用Gulp 4。確保您安裝了git和node.js。克隆GITHUB的示例項目： git克隆https://github.com/craigbuckler/gulp4-css CD GULP4-CSS NPM I Gulp -Cli -G npm i Gulp
• 導航到（或瀏覽器中顯示的外部URL）。
另外，創建一個新項目：
• 安裝node.js。
全球安裝Gulp：

創建一個項目文件夾（例如，

my-gulp-project ）。 初始化npm：

npm init

創建源文件（圖像，scss）的subfolders create

為編譯文件創建創建一個

[2

安裝必要的模塊：

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

[2 const gulp = require（'gulp'）; const imagemin = require（'gulp-iagemin'）; const sass = require（'gulp-sass'）（require（'sass'））; //注意：使用Dart-Sass const postcss = require（'Gulp-Postcss'）; const autoprefixer = require（'autoprefixer'）; const cssnano = require（'cssnano'）; //圖像任務 函數圖像（）{ 返回Gulp.src（'SRC/Images/*'） .pipe（imagemin（）） .pipe（gulp.dest（'構建/images'））; } // CSS任務 功能CSS（）{ 返回Gulp.src（'SRC/SCSS/MAIN.SCSS'） .pipe（sass（）。on（'錯誤'，sass.logerror）） 。 .pipe（gulp.dest（'build/css'））; } exports.Images =圖像; exports.css = css; exports.default = gulp.parallel（Images，css）; //在並行

中運行任務 此示例演示了基本的圖像優化和使用縮略和自動固定的SASS彙編。 一個更全面的將包含諸如Sourcemaps，BrowserSync和更複雜的Postcss插件之類的功能。 有關完整的示例，請參閱原始文本。

記住要調整文件路徑以匹配您的項目結構。 在您的終端中運行

以及原始文章中提供了進一步的解釋。