gulp-postcss

gulp-postcss

PostCSS has been gaining popularity rapidly for some time now. If you have not used it yet or don’t know what PostCSS is, then I suggest you take a look at this introductory PostCSS tutorial, which discusses the basics of PostCSS including how to install and run PostCSS with a quick overview of some plugins.

PostCSS已经Swift流行了一段时间。 如果您还没有使用过PostCSS，或者不知道PostCSS是什么，那么我建议您看一下这个入门PostCSS教程 ，该教程讨论PostCSS的基础知识，包括如何安装和运行PostCSS以及一些插件的快速概述。

In this tutorial, I will show you how to use PostCSS with Gulp, the popular automation tool. Since this is not an introductory Gulp tutorial I won’t be covering the basics of Gulp. But for a quick refresher, you can check out this excellent article.

在本教程中，我将向您展示如何将PostCSS与流行的自动化工具Gulp一起使用。 由于这不是Gulp入门教程，因此我不会介绍Gulp的基础知识。 但是，如果需要快速复习，可以查看这篇出色的文章 。

设置项目 (Setting Up the Project)

Before beginning this tutorial, you should have a project folder that you will work in. The folder should have Gulp installed and have two folders inside it with the names “initial” and “final” (or some other name of your choice). The folder called “initial” will have your raw and unprocessed CSS code. The “final” folder will have the processed files, ready to be used.

在开始本教程之前，您应该有一个要使用的项目文件夹。该文件夹应该已安装Gulp，并且其中有两个文件夹，名称分别为“ initial”和“ final”(或您选择的其他名称)。 名为“ initial”的文件夹将包含您的原始和未处理CSS代码。 “最终”文件夹将具有已处理的文件，可供使用。

Before going any further, navigate to your project folder using the terminal and run the following command:

在继续操作之前，请使用终端导航到您的项目文件夹并运行以下命令：

npm install gulp-postcss --save-dev

The --save-dev flag adds the plugin that you are installing to the project.json file as a dependency. This will be helpful in situations where you need to collaborate with others on a project. When other team members run the npm install command on your package, all the plugins will be installed automatically.

--save-dev标志将要安装的插件作为依赖项添加到project.json文件。 在需要与其他人协作进行项目的情况下，这将很有帮助。 当其他团队成员在您的软件包上运行npm install命令时，所有插件将自动安装。

At this point your folder structure should be:

此时，您的文件夹结构应为：

initial — The folder with your raw CSS files.

initial —包含原始CSS文件的文件夹。

style.css — Unprocessed stylesheet that we will edit later.

style.css —未经处理的样式表，我们稍后将对其进行编辑。

initial — The folder with your raw CSS files.

initial —包含原始CSS文件的文件夹。

final — The folder with processed CSS files.

final —具有已处理CSS文件的文件夹。

node_modules — The folder with all npm modules.

node_modules —包含所有npm模块的文件夹。

gulp — Created when you installed Gulp.

gulp —在安装Gulp时创建。

gulp-postcss — Created after running the command above.

gulp-postcss-运行上述命令后创建。

node_modules — The folder with all npm modules.

node_modules —包含所有npm模块的文件夹。

guplfile.js — Your Gulp file.

guplfile.js —您的Gulp文件。

package.json — Your package.json file.

package.json —您的package.json文件。

安装插件 (Installing a Plugin)

Let’s install a basic plugin to get started. The plugin we are going to use is short-color. This basically extends the existing color property to also set the background color using a second value. Run the following command to install short-color.

让我们安装一个基本的插件来开始。 我们将要使用的插件是short-color 。 这基本上扩展了现有的color属性，还可以使用第二个值设置背景色。 运行以下命令以安装short-color 。

npm install postcss-short-color --save-dev

You could also install both gulp-postcss and postcss-short-color at the same time using:

您还可以使用以下命令同时安装gulp-postcss和postcss-short-color ：

npm install gulp-postcss postcss-short-color --save-dev

After both plugins have been installed, you need to open up and edit the gulpfile.js file so you can start working with the plugin. We begin by including the following lines to enable both plugins:

在安装完两个插件之后，您需要打开并编辑gulpfile.js文件，以便可以开始使用该插件。 我们首先包括以下几行以启用这两个插件：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); var shortColor = require('postcss-short-color');

Now, let’s set up a Gulp task to process our raw CSS file and create a production-ready stylesheet. Here is the code to do so:

现在，让我们设置一个Gulp任务来处理我们的原始CSS文件并创建可用于生产的样式表。 这是这样做的代码：

gulp.task('css', function () { return gulp.src('initial/*.css') .pipe(postcss([shortColor])) .pipe(gulp.dest('final')); });

I begin by creating a task called css. This name is to be used whenever you want to run the corresponding function. You can specify the files that you want to process inside gulp.src(). Using *.css will process all CSS files inside the “initial” folder.

首先创建一个名为css的任务。 每当您要运行相应的功能时，都将使用此名称。 您可以指定要在gulp.src()内部处理的文件。 使用*.css将处理“初始”文件夹中的所有CSS文件。

Next, we use the pipe() function to call all our plugins. To do so, we pass all the plugins as an argument to the postcss() function. In our basic example, we actually have just one plugin to pass. I’ll show you how to pass multiple plugins as arguments in the next section. After piping the plugin, gulp.dest() is used to set the destination of processed files.

接下来，我们使用pipe()函数调用所有插件。 为此，我们将所有插件作为参数传递给postcss()函数。 在我们的基本示例中，实际上只有一个插件可以传递。 在下一节中，我将向您展示如何将多个插件作为参数传递。 在gulp.dest()插件之后，使用gulp.dest()设置已处理文件的目标。

To test if everything has been set up correctly, create a style.css file inside the “initial” folder. style.css will have the following CSS:

要测试所有设置是否正确，请在“初始”文件夹中创建一个style.css文件。 style.css将具有以下CSS：

section { color: white black; }

Next you need to run the gulp css command inside your terminal. At this point, if you look inside the “final” folder, you should see a style.css file with following CSS:

接下来，您需要在终端中运行gulp css命令。 此时，如果查看“ final”文件夹，则应该看到带有以下CSS的style.css文件：

section { color: white; background-color: black; }

If the CSS in your stylesheet matches the CSS above, then we can assume everything is working.

如果样式表中CSS与上面CSS相匹配，那么我们可以假定一切正常。

安装多个插件 (Installing Multiple Plugins)

Just using one basic plugin is not going to help you much with productivity. PostCSS has a lot of impressive and incredibly useful plugins so in most cases you will be using more than just one. In this section I will show you how to work with multiple plugins at once.

仅使用一个基本插件不会对您的生产力有多大帮助。 PostCSS有很多令人印象深刻且非常有用的插件，因此在大多数情况下，您将使用多个插件。 在本节中，我将向您展示如何一次使用多个插件。

Three PostCSS plugins/packs that you might find useful are: short, cssnext and autoprefixer.

您可能会发现有用的三个PostCSS插件/包是： short ， cssnext和autoprefixer 。

short will enable you to write shorthand CSS for a lot of properties. For instance:

short将使您能够编写许多属性的简写CSS。 例如：

.heading { font-size: 1.25em 2; }

will become:

会变成：

.heading { font-size: 1.25em; line-height: 2; }

cssnext enables you to use the latest CSS syntax in your stylesheets. For instance, the following CSS:

cssnext使您可以在样式表中使用最新CSS语法。 例如，以下CSS：

.link { color: color(green alpha(-10%)); }

is converted to:

转换为：

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

Finally, autoprefixer will add vendor prefixes to your CSS and convert:

最后， autoprefixer会将供应商前缀添加到CSS并进行转换：

img { filter: grayscale(0.9); }

to:

至：

img { -webkit-filter: grayscale(0.9); filter: grayscale(0.9); }

Now let’s see how we can install these plugins and then use them to transform our stylesheets. Run the following command in the project directory:

现在，让我们看看如何安装这些插件，然后使用它们来转换样式表。 在项目目录中运行以下命令：

npm install autoprefixer postcss-short postcss-cssnext --save-dev

We will have to modify our Gulp task to include all these plugins. Instead of piping all these plugins one at a time, we will store them in an array for ease of maintenance and brevity. Here is the code for our gulpfile.js:

我们将不得不修改Gulp任务以包括所有这些插件。 我们将不再将所有这些插件一次分发，而是将它们存储在一个数组中，以便于维护和简化。 这是我们的gulpfile.js的代码：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnext = require('postcss-cssnext'); var shortcss = require('postcss-short'); gulp.task('css', function() { var plugins = [ shortcss, cssnext, autoprefixer({browsers: ['> 1%'], cascade: false}) ]; return gulp.src('initial/*.css') .pipe(postcss(plugins)) .pipe(gulp.dest('final')); });

You might have noticed that I have specified some options for the Autoprefixer plugin. These options determine the CSS that Autoprefixer outputs. In this case, I am telling the plugin to support all browsers with more than 1% of global usage. I have also disabled cascading so that all prefixed and unprefixed properties are left aligned. Similar options are also available for most other plugins.

您可能已经注意到，我为Autoprefixer插件指定了一些选项。 这些选项确定Autoprefixer输出CSS。 在这种情况下，我要告诉插件支持全球使用率超过1％的所有浏览器。 我还禁用了级联，以便所有带前缀和无前缀的属性保持对齐。 大多数其他插件也可以使用类似的选项。

To test if everything is working, put the following CSS in your stylesheet:

要测试一切是否正常，请将以下CSS放入样式表中：

.prefix-filter { display: flex; } .cssshort-section { text: #333 bold justify uppercase 1.25em 1.7 .05em; } .cssnext-link { color: color(blue alpha(-10%)); } .cssnext-link:hover { color: color(orange blackness(80%)); }

If you run gulp css in the terminal now, you should get the following processed CSS inside style.css in the “final” folder.

如果现在在终端中运行gulp css ，则应在“ final”文件夹中的style.css中获得以下已处理CSS。

.prefix-filter { display: -webkit-box; display: flex; } .cssshort-section { color: #333; font-weight: 700; text-align: justify; text-transform: uppercase; font-size: 1.25em; line-height: 1.7; letter-spacing: .05em; } .cssnext-link { color: #0000ff; color: rgba(0, 0, 255, 0.9); } .cssnext-link:hover { color: rgb(51, 33, 0); }

插件的执行顺序 (Execution Order of Plugins)

The example in the last section illustrated the usefulness of PostCSS quite clearly. All of PostCSS’s power lies in its plugins. One thing to keep in mind, however, when using multiple plugins — which you eventually will in complex projects — is the order in which you execute them.

上一节中的示例非常清楚地说明了PostCSS的有用性。 PostCSS的所有功能都在于其插件。 但是，在使用多个插件时(要在复杂项目中最终使用)，要记住的一件事是执行它们的顺序。

Consider two plugins rgba-fallback and color-function. rgba-fallback will transform an RGBA color to hexadecimal format and color-function will transform CSS’s color() function to more compatible CSS. Let’s say you have following CSS:

考虑两个插件rgba-fallback和color-function 。 rgba-fallback会将RGBA颜色转换为十六进制格式，而color-function将CSS的color()函数转换为更兼容CSS。 假设您有以下CSS：

body { background: color(orange a(90%)); }

If you were to run the rgba-fallback plugin before the color-function plugin, like this:

如果要在颜色功能插件之前运行rgba-fallback插件，如下所示：

var plugins = [ rgbafallback, colorfunction ];

You will get the following CSS:

您将获得以下CSS：

body { background: rgba(255, 165, 0, 0.9); }

As you can see, there is no RGBA fallback in the processed CSS. The reason for this anomaly is that when the fallback plugin runs, it finds the background to be color(orange a(90%)) and does not know what to do with it. Later, the color function plugin executes and creates an RGBA color value from the original color function.

如您所见，在经过处理CSS中没有RGBA后备。 产生此异常的原因是，当fallback插件运行时，它发现背景为color(orange a(90%)) ，并且不知道如何处理。 后来，颜色功能插件从原始颜色功能执行并创建RGBA颜色值。

If you were to reverse the plugin order and run them in the following sequence:

如果要颠倒插件顺序并按以下顺序运行它们：

var plugins = [ colorfunction, rgbafallback ];

The final CSS would be:

最终CSS将是：

body { background: #ffa500; background: rgba(255, 165, 0, 0.9) }

This time the color plugin first transforms the background color to an RGBA value and the fallback plugin later adds a hexadecimal fallback.

这次，颜色插件首先将背景色转换为RGBA值，而后备插件随后添加了十六进制后备。

结论 (Conclusion)

In this tutorial I have covered the basics of using Gulp and PostCSS together. With the right combination of plugins and efficient use of Gulp, you can save many hours of development and avoid unnecessary headache. If you have any questions or suggestions for the techniques mention in this tutorial let me know in the comments!

在本教程中，我介绍了一起使用Gulp和PostCSS的基础知识。 通过正确组合插件和有效使用Gulp，您可以节省很多开发时间并避免不必要的麻烦。 如果您对本教程中提到的技术有任何疑问或建议，请在评论中让我知道！

翻译自: https://www.sitepoint.com/how-to-use-postcss-with-gulp/

gulp-postcss