Search code examples
node.jsgulppostcss

Post CSS critical split


I need create separated critical style according https://www.npmjs.com/package/postcss-critical-split.

Name of gulp task is "criticalCSS". Why its not working?

gulp.task('criticalCSS', function () {
    return gulp.src(['css/style.css','!css/*-critical.css'])
    .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(postcss([require('postcss-critical-split')]))
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('css'));
});

Thanks for any help.

My gulpfile looks https://jsfiddle.net/ydhfjwdw/


Solution

  • Solution:

    gulp.task('criticalCSS', function () {
        var processors = [
            postcssCriticalSplit({
                'output': 'critical',
                'startTag': 'critical:start',
                'stopTag': 'critical:end'
            })
        ];
     
        return gulp.src(['css/style.css'])
        .pipe(postcss(processors))
        .pipe(cssnano())
        .pipe(rename({
            suffix: '.critical'
        }))
        .pipe(gulp.dest('css'));
    });