Question

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

Answer 1

我认为，关键是内置于elixir ¹。您需要使用custom task扩展elixir。

这将创建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），请给我一个参考链接，我会进一步研究它。

Laravel elixir的关键性css

1 个答案: