如何使用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中文网其他相关文章！