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

感谢您的帮助。

我的 gulp 文件看起来 https://jsfiddle.net/ydhfjwdw/

Answer 1

解决方案：

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

Answer 2

使用gulp-postcss代替postcss'

Post CSS 关键分裂

Post CSS critical split

node.js

gulp

postcss