gulp-postcss_PostCSS快速入门指南：Gulp设置

最新推荐文章于 2025-10-30 09:40:22 发布

翻译最新推荐文章于 2025-10-30 09:40:22 发布 · 520 阅读

文章标签：

#java #python #vue #编程语言 #javascript #ViewUI

本文详细介绍如何使用Gulp任务运行器与PostCSS插件，实现自动化CSS预处理，包括安装配置、添加PostCSS插件及运行测试编译等关键步骤。

gulp-postcss

在上一个教程中，我们介绍了如何使用CodePen或Prepros立即开始使用PostCSS。这些选项很棒，但有局限性，因为您无法控制可以使用哪些插件。

在本教程中，我们将介绍如何将PostCSS与任务运行程序Gulp一起使用，使您可以自己决定要使用哪些插件，从而真正地使用插件生态系统。

注意：如果您以前从未使用过命令行或任务运行器，建议您在开始本教程之前阅读我们的免费系列： Web设计命令行。

先决条件

鉴于我们将使用Gulp，我们假设您已经安装了使用它的先决条件：

Node.js
NPM
吉特

如果不确定是否已安装这些工具，请按照教程“ Web设计命令行：驯服第三者软件包”进行操作，因为它将带您逐步完成这些先决条件。

还请遵循教程Web设计命令行：使用Gulp自动化来确保您了解Gulp的使用基础。此外，请按照教程“ Gulp的安装项目”部分中的说明进行操作。在继续之前，您应该具有以下项目文件夹：

“ gulpfile.js”（Gulpfile）
一个“ package.json”文件
Gulp安装在“ node_modules”文件夹中，并设置为项目的开发依赖项

Gulp基本CSS设置

在项目文件夹中，创建两个子文件夹，一个名为“ src”，另一个名为“ dest”。 “ src”文件夹将保存您未处理CSS文件，而“ dest”文件夹将写入您的PostCSS处理的文件。

接下来，您需要将gulp-postcss插件安装到您的项目中-我们将使用它来处理PostCSS处理。

在指向您的项目文件夹的终端/命令提示符中，运行命令：

npm install --save-dev gulp-postcss

安装完成后，您的项目结构应如下所示：

现在打开您的Gulpfile进行编辑，并通过添加以下代码来创建变量以在“ gulp”和“ gulp-postcss”模块中调用：

var gulp = require('gulp');
var postcss = require('gulp-postcss');

现在，我们可以设置一个任务来读取源CSS文件并通过PostCSS对其进行处理。

添加以下内容：

gulp.task('css', function () {
  var processors = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

让我们分解一下上面代码中的内容。

在第一行中，我们设置了一个名为css的gulp任务。该任务执行一个函数，在该函数内部，我们创建了一个名为processors的数组。现在，该数组为空，但是稍后我们将用我们要使用的PostCSS插件填充该数组。

在processors数组之后，我们指定了要处理的目标文件：“ src”文件夹中的所有CSS文件。

在使用pipe()函数的两行代码的第一行中，我们将PostCSS设置为通过函数postcss()执行。作为该函数的参数，我们传递了processors数组，该数组稍后将告诉PostCSS我们要使用哪些插件。

最后，使用两个pipe()函数中的第二个函数，将处理后的代码写入“目标”文件夹中的新CSS文件中。

运行测试编译

继续，在“ src”文件夹中创建一个新的“ style.css”文件，并向其中添加一些测试CSS，例如：

.test {
    background: black;
}

现在，在终端/命令提示符下，仍然指向您的项目文件夹，运行命令：

gulp css

这将运行您刚刚设置的任务，因此，现在您应该在“目标”文件夹中找到一个新的“ style.css”文件。

打开此新文件时，您将在其中看到与源文件相同的代码。代码没有更改，因为我们还没有使用任何PostCSS插件，并且正如您在上一教程中所知道的那样，是由插件执行实际CSS操作。

添加PostCSS插件

现在，我们将添加一系列PostCSS插件和包： Autoprefixer （添加供应商前缀）， cssnext （启用将来的语法）和precss （使用类似Sass的功能扩展）。

运行以下命令以将每个插件安装到您的项目中：

npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev

注意： cssnext和precss安装可能需要一些时间，因为它们包含多个插件。

接下来，我们将定义变量以将每个变量加载到我们的项目中。在Gulpfile顶部的两个现有变量下添加以下代码：

var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');

然后，将这三个插件添加到gulp任务中的processors数组中。将数组更新为以下内容：

var processors = [
    autoprefixer,
    cssnext,
    precss
  ];

将这三个插件添加到处理器数组中后，PostCSS将知道我们希望将每个插件都应用到源CSS中。

现在，我们准备将一些测试代码添加到“ src / style.css”文件中，并检查一切是否正常。删除文件中已有的文件，然后添加以下CSS：

/* Testing autoprefixer */

.autoprefixer {
  display: flex;
}

/* Testing cssnext */

.cssnext {
  background: color(red alpha(-10%));
}

/* Testing precss */

.precss {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

现在再次运行gulp css命令，“目标”文件夹中的结果文件应具有以下内容：

/* Testing autoprefixer */

.autoprefixer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Testing cssnext */

.cssnext {
  background: rgba(255, 0, 0, 0.9);
}

/* Testing precss */

.precss {
  background: green
}

按照上面的方法，您应该看到Autoprefixer已将供应商前缀添加到第一类中，第二类中的cssnext已输出了rgba()颜色，并且第三类中的@if @else评估了@if @else检查类。

设置插件选项

注意：如果要配置插件选项，请在插件名称后的预处理器数组中添加一对括号，然后在其中传递选项。例如，您可以指定要使用Autoprefixer的浏览器列表，如下所示：

var processors = [
    autoprefixer({browsers: ['last 1 version']}),
    cssnext,
    precss
  ];

分享你的项目

PostCSS的优点在于可以使用任何插件组合进行配置。但是，这带来的挑战是确保希望在项目上工作的其他人具有相同的PostCSS插件设置。多亏了npm ，这个挑战可以通过其依赖管理系统来处理。

因为每次将插件安装到项目中时都使用--save-dev标志，所以它将作为dev依赖项添加到“ project.json”文件中。这意味着，如果您想与其他人共享您的项目，他们可以在与他们共享的软件包上运行命令npm install ，并自动安装所有相同的插件。

要了解有关依赖管理如何与NPM一起工作的更多信息，请查看教程Web设计命令行：驯服第三者软件包。

回顾一下

总结以上内容：

创建一个安装了Gulp并在其中包含Gulpfile的npm项目
安装gulp-postcss插件
设置您的Gulpfile以加载gulp和gulp-postcss插件
创建一个gulp任务来编译CSS
在任务中，设置processors阵列
通过postcss()函数通过管道传递源CSS，并将processors数组作为参数传递

从那里开始，您可以按照相同的基本步骤在项目中启用任何PostCSS插件：

使用以下命令将插件安装到项目中
npm install <plugin_name> --save-dev
定义一个变量以在您的Gulpfile中加载插件，例如
var autoprefixer = require('autoprefixer');
将该变量名添加到preprocessors数组中。

查看Github仓库中的入门文件和完整示例。

接下来：Grunt + PostCSS

在下一个教程中，我们将介绍如何在两个主要任务运行者中的另一个（Grunt）中设置PostCSS项目。到时候那里见！

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-gulp-setup--cms-24543

gulp-postcss