使用 Laravel 灵药严重 css

Critical css with Laravel elixir

我正在使用 gulp 包 critical css,之前我安装此包时使用:

 npm install --save critical 

但是在 运行 gulp --production 之后,npm 报告我这个错误:

 mix.critical is not a function

这是我完整的gulp文件代码:

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

});

为什么 npm 向我报告这个错误?

我不认为 elixir1 中内置了 critical。您需要使用 custom task.

扩展长生不老药

这将创建一个 critical 任务:

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

然后将其添加到默认任务中,将其添加到主 elixir 调用中:

mix.task('critical');

完成后,它将在您 运行 gulp 或 运行 gulp critical.

时执行
  1. 我正在浏览 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),请给我一个参考 link,我会进一步研究。