使用 Laravel 灵药严重 css

Question

我正在使用 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 向我报告这个错误？

Answer 1

我不认为 elixir¹ 中内置了 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.

时执行

我正在浏览 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，我会进一步研究。

使用 Laravel 灵药严重 css

Critical css with Laravel elixir

node.js

laravel

npm

gulp

laravel-elixir