Multiple Critical CSS files - Home / Inner

[joe-watkins]

I would love to see an example in the documentation of a multiple file setup. A good example could show a Home page and Inner page setup. Often times home styles differ from an inner template.

Is there configuration for multiple templates? I tried messing with arrays but didn't seem to work eg.

options: {
    url: ["http://localhost:4000,"http://localhost:4000/inner-page"],
    width: 1200,
    height: 900,
    outputfile: ["/path/to/local/home.css","/path/to/local/inner.css"],
    filename: config.compiledCss,
    buffer: 800*1024
}

Maybe this could just be handled creatively in Grunt? Currently I'm just switching manually. I'm not even sure if this is optimal..might take a while on build.

How do you suggest we handle this situation?

[jefflembeck]

So, since this is a multiTask, we follow the grunt standard for this and for multiple templates, we do:

criticalcss: {
    foo: {
        options: {
            url: "http://localhost:4000",
            width: 1200,
            height: 900,
            outputfile: "/path/to/local/home.css",
            filename: config.compiledCss,
            buffer: 800*1024
        }
    },
    bar: {
        options: {
            url: "http://localhost:4000/inner-page",
            width: 1200,
            height: 900,
            outputfile: "/path/to/local/inner.css",
            filename: config.compiledCss,
            buffer: 800*1024
        }
    }
}