如何与Gulp一起使用PostCSS

> PostCSS和GULP：CSS处理的强大组合

>本教程演示了如何利用Gulp进行有效的CSS处理来利用邮政信箱。 我们将介绍项目设置，插件安装，处理多个插件，了解执行顺序以及解决共同的挑战。 假定先前熟悉Gulp。

>

项目设置

1. 确保您安装了一个项目文件夹。

   >

2. 创建两个子文件夹：initial（对于RAW CSS）和final（用于处理的CSS）。

   >

3. > installgulp-postcss：

   <code class="language-bash">npm install gulp-postcss --save-dev</code>

您的文件夹结构应该类似于以下方式：

>

<code>my-project/
├── initial/
│   └── style.css
└── final/
└── gulpfile.js
└── package.json
└── node_modules/</code>

>插件安装和用法

让我们从postcss-short-color开始：

>

1. 安装：

   <code class="language-bash">npm install postcss-short-color --save-dev</code>

2. > updategulpfile.js：

   <code class="language-javascript">const gulp = require('gulp');
   const postcss = require('gulp-postcss');
   const shortColor = require('postcss-short-color');
   
   gulp.task('css', () => {
     return gulp.src('initial/*.css')
       .pipe(postcss([shortColor]))
       .pipe(gulp.dest('final'));
   });</code>

创建initial/style.csswith：

<code class="language-css">section {
  color: white black;
}</code>

运行gulp css将生成final/style.css：

>

<code class="language-css">section {
  color: white;
  background-color: black;
}</code>

>与多个插件一起工作 >用于增强的生产率，使用多个插件。 让我们添加

>，

和postcss-short：postcss-cssnext> autoprefixer

安装：

1. <code class="language-bash">npm install autoprefixer postcss-short postcss-cssnext --save-dev</code>

修改
2. ：

   gulpfile.js

   <code class="language-javascript">const gulp = require('gulp');
   const postcss = require('gulp-postcss');
   const autoprefixer = require('autoprefixer');
   const cssnext = require('postcss-cssnext');
   const short = require('postcss-short');
   
   gulp.task('css', () => {
     const plugins = [
       short,
       cssnext,
       autoprefixer({ browsers: ['> 1%'], cascade: false }),
     ];
     return gulp.src('initial/*.css')
       .pipe(postcss(plugins))
       .pipe(gulp.dest('final'));
   });</code>

插件执行顺序

阵列中插件的顺序至关重要。 错误的排序可能会导致意外结果。 实验和测试以找到最佳序列。

>

结论

>本教程为使用Gulp使用PostCSS提供了基础。 探索庞大的Postcs插件生态系统，以增强您的CSS工作流程。 请记住要仔细考虑插件执行订单以获得最佳结果。

>

（按照原始请求将在此处插入图像。由于我无法显示图像，因此来自原始输入的图像URL将在输出中使用。）

>>

以上是如何与Gulp一起使用PostCSS的详细内容。更多信息请关注PHP中文网其他相关文章！