gulp-postcss

What is gulp-postcss?

gulp-postcss is a Gulp plugin to pipe CSS through several PostCSS plugins, allowing you to transform styles with JS plugins. It is highly flexible and can be used for a variety of CSS processing tasks such as autoprefixing, minification, and linting.

What are gulp-postcss's main functionalities?

Autoprefixing

This feature allows you to automatically add vendor prefixes to your CSS rules using the autoprefixer PostCSS plugin. This ensures compatibility with different browsers.

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

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

CSS Minification

This feature allows you to minify your CSS files using the cssnano PostCSS plugin, which helps in reducing the file size and improving load times.

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');

gulp.task('minify-css', function () {
  return gulp.src('src/*.css')
    .pipe(postcss([cssnano()]))
    .pipe(gulp.dest('dest'));
});

Linting CSS

This feature allows you to lint your CSS files using the stylelint PostCSS plugin, which helps in maintaining code quality and consistency.

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const stylelint = require('stylelint');
const reporter = require('postcss-reporter');

gulp.task('lint-css', function () {
  return gulp.src('src/*.css')
    .pipe(postcss([
      stylelint(),
      reporter({ clearReportedMessages: true })
    ]));
});

Other packages similar to gulp-postcss

gulp-sass

gulp-sass is a Gulp plugin for compiling Sass to CSS. While gulp-postcss focuses on transforming CSS with various plugins, gulp-sass is specifically designed for compiling Sass files. It is often used in conjunction with gulp-postcss for a complete CSS processing workflow.

gulp-less

gulp-less is a Gulp plugin for compiling Less to CSS. Similar to gulp-sass, it is focused on compiling Less files rather than transforming CSS with plugins. It can be used alongside gulp-postcss for additional CSS transformations.

gulp-clean-css

gulp-clean-css is a Gulp plugin for minifying CSS files. While gulp-postcss can achieve minification through plugins like cssnano, gulp-clean-css is a dedicated tool for this purpose and may offer more specialized options for minification.

README

gulp-postcss

PostCSS gulp plugin to pipe CSS through several processors, but parse CSS only once.

Basic usage

var postcss = require('gulp-postcss')
var gulp = require('gulp')
var autoprefixer = require('autoprefixer-core')
var mqpacker = require('css-mqpacker')
var csswring = require('csswring')

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

Source map support

Source map is disabled by default, to extract map use together with gulp-sourcemaps.

return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'));