如何使用Gulp.js自動化CSS任務

>本文探討了Gulp.js如何簡化重複的CSS開發任務，從而提高您的工作流程效率。雖然文本編輯器足以用於網絡開發，但重複的任務對於現代網站至關重要，最佳性能往往令人沮喪。 其中包括：跨各種服務器的轉換，文件串聯，生產代碼縮小和部署。 這些任務隨著每一個變化而重複，可能會變得越來越繁重。 > 幸運的是，Gulp.js自動化了這些過程。 本文演示了其在自動化各種CSS任務中的應用：圖像優化，SASS編譯，資產處理和內部，自動供應商前綴，刪除未使用的CSS選擇器，CSS縮小，文件尺寸，文件大小報告，瀏覽器DevTools的源地圖生成以及Live Browser Reloading，在源文件更改時。

使用Gulp.js：

的關鍵優點

>自動化：
• 自動化重複任務，例如圖像優化，SASS彙編和CSS Minification。 > 靈活性：
使用JavaScript進行任務配置，允許基於環境（開發/生產）的簡單修改。
• 可擴展性：利用許多插件（例如，
，
• ）用於增強功能。 >實時重新加載：gulp-imagemin與瀏覽器集成，以跨多個瀏覽器和設備進行實時更新。 gulp-sass
• 有效的任務管理：處理串行或併行處理任務以進行優化的構建時間。
• 為什麼選擇Gulp？ >
許多任務跑步者（Grunt，WebPack，包裹，NPM腳本）都存在，但是Gulp由於其穩定性，速度，廣泛的插件支持和基於JavaScript的配置而脫穎而出。這種基於代碼的方法提供了優點，可以實現有條件的輸出修改，例如，在最終部署期間刪除Sourcemaps。

入門：

>本教程使用Gulp 4。確保您安裝了git和node.js。克隆github的示例項目：

>導航到（或瀏覽器中顯示的外部URL）。

>或者創建一個新項目：

<code class="language-bash">git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp</code>

> install node.js.

http://localhost:8000/全球安裝Gulp：

>

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

）。
1. >
>初始化npm：
2. npm i gulp-cli -g
create
3. 源文件（圖像，scss）的子文件夾。 my-gulp-project>創建編譯文件的文件夾。
>
4. 創建一個用於測試的文件。 npm init
5. src模塊安裝：
6. 安裝必要的模塊：build

   <code class="language-bash">git clone https://github.com/craigbuckler/gulp4-css
   cd gulp4-css
   npm i gulp-cli -g
   npm i
   gulp</code>

   gulpfile.js配置（示例）：

   文件定義了任務。 一個簡化的示例著重於圖像優化和CSS處理：gulpfile.js

   <code class="language-bash">npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss browser-sync --save-dev</code>

   >本示例演示了基本的圖像優化和使用縮略和自動固定的SASS彙編。 更全面的

   將包含諸如Sourcemaps，Browsersync和更複雜的PostCSS插件之類的功能。 請參閱原始文本以完整的示例。 gulpfile.js

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

   以執行任務。 原始文章中提供了完整的，詳細的gulp和進一步的解釋。

以上是如何使用Gulp.js自動化CSS任務的詳細內容。更多資訊請關注PHP中文網其他相關文章！