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?

Andrew Myers · Accepted Answer · 2017-07-25 03:10:17Z

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.

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.

Collectives™ on Stack Overflow

Critical css with Laravel elixir

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related