发布CSS关键分裂

Question

我需要根据https://www.npmjs.com/package/postcss-critical-split创建分离的关键风格。

gulp任务的名称是“criticalCSS”。 为什么它不起作用？

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

感谢您的帮助。

我的gulpfile看起来https://jsfiddle.net/ydhfjwdw/

Answer 1

使用gulp-postcss代替postcss'

Answer 2

解决方案：

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