我目前有以下gulpfile.js从几个URL获取关键css并创建2个单独的文件:
var gulp = require('gulp');
var purge = require('gulp-css-purge');
var concatCss = require('gulp-concat-css');
var critical = require('critical');
gulp.task('critical', ['generate'], function () {
gulp.src(['./css/critical-*.css'])
.pipe(concatCss('./css/critical.css'))
.pipe(purge())
.pipe(gulp.dest('.'));
});
gulp.task('generate', function () {
critical.generate({
base: './',
src: 'http://example.com/category.html',
dimensions: [{
width: 1280,
height: 960
}],
dest: 'css/critical-category.css',
minify: true,
extract: false,
pathPrefix: '/css',
ignore: ['font-face']
});
critical.generate({
base: './',
src: 'http://example.com/',
dimensions: [{
width: 1280,
height: 960
}],
dest: 'css/critical-home.css',
minify: true,
extract: false,
pathPrefix: '/css',
ignore: ['font-face']
});
});
我创建critical-*.css
文件的唯一原因是稍后将它们连接起来并将重复内容删除到单个critical.css
文件中。
有更有效的方法吗?我一直在尝试使用生成的关键css作为流的一部分,就像关键README一样,但我无法使用外部URL工作。