gulp-html-postcss

gulp-html-postcss

PostCSS gulp plugin with support for HTML and HTML-like:

• JSX
• Vue Single-File Component
• Quick App
• Markdown

Install

$ npm install --save-dev gulp-html-postcss

Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.

Basic usage

The configuration is loaded automatically from postcss.config.js as described here, so you don't have to specify any options.

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

gulp.task('css', () => (
    gulp.src('./src/*.html')
        .pipe(postcss())
        .pipe(gulp.dest('./dest'))
));

Advanced usage

You can pass config as an {Object} as described here,

If you want to configure postcss on per-file-basis, you can pass a callback that receives ctx with the context options and the vinyl file. Described here,

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const reporter = require('gulp-reporter');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sugarss = require('sugarss');

gulp.task('css', () => {
    const callback = (ctx) => ({
        // Configure parser on per-file-basis.
        parser: ctx.file.extname === '.sss' ? 'sugarss' : false,
        // Plugins can be loaded in either using an {Object} or an {Array}.
        plugins: [
            autoprefixer,
            cssnano
        ]
    });

    return gulp.src('./src/*.html', {
        // Source map support
        sourcemaps: true
    })
        .pipe(postcss(callback))
        // Message repport support
        .pipe(reporter())
        .pipe(gulp.dest('./dest'));
});