Critical css with Laravel elixir

Question

I´m using the gulp package critical css, previosly I install this package with:

 npm install --save critical 

But after run gulp --production, the npm report me this error:

 mix.critical is not a function

this is my complete gulpfile code:

var elixir = require('laravel-elixir');
var BrowserSync = require('laravel-elixir-browsersync');
var critical = require('critical');

elixir(function(mix) {

    mix.styles([
        "bootstrap.css",
        "bootstrap-theme.css",
        "main.css",
        "jquery.fancybox.css",
        "font-awesome.css",
        ]).version("css/all.css")

    mix.critical({
        src: 'http://myapp.dev',
        css: 'public/css/all.css',
        width: 1280,
        height: 600,
        dest: 'public/css/critical.css'
    });

});

Why npm report me this error?

Answer 1

I don't think critical is built into elixir¹. You need to extend elixir with a custom task.

This will create a critical task:

var critical = require('critical');
var gulp = require('gulp');

gulp.task('critical', function() {
  critical.generate({
    src: 'http://myapp.dev',
    css: 'public/css/all.css',
    width: 1280,
    height: 600,
    dest: 'public/css/critical.css'
  });
});

Then to add it to the default task, add this inside the main elixir call:

mix.task('critical');

When this is done, it will be executed when you run gulp or when you run gulp critical.

---

1. I'm going by looking through the recipes folder in the repo. The task.js file in particular mentions needing to extend elixir. If elixir does indeed have a built-in automatic extending of other modules (besides the ones listed here), please toss me a reference link and I'll look into it further.