How to get critical css from multiple external URLs?

[jahvi]

I currently have the following gulpfile.js that fetches the critical css from a couple URLs and creates 2 separate files:

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

As you can see the only reason I'm creating the critical-*.css files is to later concatenate them and remove duplicate content into a single critical.css file. Is there a more efficient way to do this? I've been trying to use the generated critical css as part of a stream like on the README but I haven't been able to get it to work using external URLs.

[zomars]

I'm also looking for this! Maybe src could receive an array of URLs as input.

[mainak-grmtech]

Here is the code to get critical css from multiple external URL:

var HostUrl= 'http://example.com/';

var UrlForGeneratingCriticalCss = {
    homepage: ['home'
    ],
    category-pages:['category-1','category-2'],
    blog-pages:['blog','blog-inner'],
};

gulp.task('criticalloop', function () {
    for (var key in UrlForGeneratingCriticalCss) {
        var bundle = key;

        for(var EachUrl in UrlForGeneratingCriticalCss[bundle])
        {
           var TargetUrl = HostUrl+UrlForGeneratingCriticalCss[bundle][EachUrl];
           var outputCssName = './css/critical-'+UrlForGeneratingCriticalCss[bundle][EachUrl]+'.css';
           critical.generate({
                src: TargetUrl,
                dest: outputCssName,
                minify: true,
                ignore: ['@font-face',/url\(/]
            });
        }
    }
});

[bezoerb]

relates to https://github.com/addyosmani/critical/issues/320

[pratham2003]

@jahvi How are you loading your critical CSS? Inlining it into HTML or loading as a file in HEAD?

If inlining you don't need to concatenate them, just load the critical CSS unique to that page template.

[jahvi]

I'm inlining them, the problem is that I don't have that much control over what to load when (because of limitations on the CMS system) so in our case it would be a lot simpler to inline all critical path css in the head.

For now @mainak-grmtech solutions works very well as a workaround.

[bezoerb]

We'll consider adding this feature to v2.1 after the rewrite.