發佈CSS關鍵拆分

Question

我需要根據https://www.npmjs.com/package/postcss-critical-split創建分離的關鍵樣式。

吞噬任務的名稱是「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.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')); 
 
});