带有 Laravel 长生不老药的关键 CSS答案

【问题标题】：Critical css with Laravel elixir带有 Laravel 长生不老药的关键 CSS
【发布时间】：2017-12-29 20:41:26
【问题描述】：

我正在使用 gulp 包 critical css，之前我安装了这个包：

 npm install --save critical

但是在运行gulp --production 之后，npm 会向我报告这个错误：

 mix.critical is not a function

这是我完整的 gulpfile 代码：

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 会报告这个错误？

【问题讨论】：

标签： node.js laravel npm gulp laravel-elixir

【解决方案1】：

我不认为关键是 Elixir¹ 中内置的。您需要使用 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。 task.js file 特别提到需要扩展长生不老药。如果 elixir 确实内置了其他模块的自动扩展 (besides the ones listed here)，请给我一个参考链接，我会进一步研究。

【讨论】：