[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插件之类的功能。 有关完整的示例，请参阅原始文本。

记住要调整文件路径以匹配您的项目结构。 在您的终端中运行

以及原始文章中提供了进一步的解释。