用Laravel灵药临界CSS

我正在使用gulp软件包的关键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

我认为关键不在于长生不老¹ 。 您需要使用自定义任务来扩展灵药。

这将创build一个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' }); }); 

然后将其添加到默认任务中，在主要灵药调用中添加：

 mix.task('critical'); 

当这个完成后，它会在你运行gulp或者当你运行的时候被执行。

---

1. 我要通过回购中的食谱文件夹来查看。 task.js文件特别提到需要扩展elixir。 如果仙丹确实有其他模块的内置自动扩展（ 除了这里列出的 ），请给我一个参考链接，我会进一步研究。