如何从多个外部URL获取关键css?

时间:2017-06-13 13:26:07

标签: html css node.js npm gulp

我目前有以下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工作。

0 个答案:

没有答案