使用 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
.
时执行
- 我正在浏览 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,我会进一步研究。
我正在使用 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
.
- 我正在浏览 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,我会进一步研究。