How to Use PostCSS with Gulp

PostCSS and Gulp: A Powerful Combination for CSS Processing

This tutorial demonstrates how to leverage PostCSS with Gulp for efficient CSS processing. We'll cover project setup, plugin installation, handling multiple plugins, understanding execution order, and addressing common challenges. Prior familiarity with Gulp is assumed.

Project Setup

1. Ensure you have a project folder with Gulp installed.

2. Create two subfolders: initial (for raw CSS) and final (for processed CSS).

3. Install gulp-postcss:

   npm install gulp-postcss --save-dev

Your folder structure should resemble this:

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

Plugin Installation and Usage

Let's start with postcss-short-color:

1. Install:

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

2. Update gulpfile.js:

   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'));
   });

Create initial/style.css with:

section {
  color: white black;
}

Running gulp css will generate final/style.css:

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

Working with Multiple Plugins

For enhanced productivity, utilize multiple plugins. Let's add postcss-short, postcss-cssnext, and autoprefixer:

1. Install:

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

2. Modify gulpfile.js:

   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'));
   });

Plugin Execution Order

The order of plugins in the array is crucial. Incorrect ordering can lead to unexpected results. Experiment and test to find the optimal sequence.

Conclusion

This tutorial provides a foundation for using PostCSS with Gulp. Explore the vast PostCSS plugin ecosystem to enhance your CSS workflow. Remember to carefully consider plugin execution order for optimal results.

(Image would be inserted here, as per the original request. Since I cannot display images, the image URLs from the original input would be used in the output.)

The above is the detailed content of How to Use PostCSS with Gulp. For more information, please follow other related articles on the PHP Chinese website!