Javascript 使用Critical和Gulp为每个*.HTML文件生成关键CSS
好吧,过去一天我一直在努力想办法解决这个问题。我正在尝试为我的目录中的每个HTML文件生成关键CSS。我当前在单个文件上运行良好的工作代码:Javascript 使用Critical和Gulp为每个*.HTML文件生成关键CSS,javascript,gulp,Javascript,Gulp,好吧,过去一天我一直在努力想办法解决这个问题。我正在尝试为我的目录中的每个HTML文件生成关键CSS。我当前在单个文件上运行良好的工作代码: export const criticalCSS = () => { return critical.generate({ inline: true, base: '_dist', src: 'index.html', css: '_dist/index.css', width: 960, heig
export const criticalCSS = () => {
return critical.generate({
inline: true,
base: '_dist',
src: 'index.html',
css: '_dist/index.css',
width: 960,
height: 600,
dest: 'index.html',
extract: true,
ignore: ['@font-face']
})
}
通常,我应该期望src接受一组文件路径,从我在每个grunt教程中看到的情况来看,grunt插件就是这样。然而,我不能让它工作在吞咽。我看到一些帖子建议使用gulp foreach,但这似乎也不起作用
例如:
export const criticalCSS = () => {
return gulp.src(paths.html.src).pipe(
foreach(function (stream, file) {
return stream.pipe(
critical.generate({
inline: true,
base: '_dist',
src: file.path,
css: '_dist/index.css',
width: 960,
height: 600,
dest: file.path,
extract: true,
ignore: ['@font-face']
})
)
})
)
}
有人用过这个吗?我能想象的另一件事是,用每个HTML文件路径硬编码一个数组,然后通过critical.generate函数在数组中循环。但是,如果必须手动指定每个HTML文件,则无法维护该库。如果您正在使用该库 我已经取得了这样的成功:
var critical = require('critical').stream;
gulp.task('html-inline-critical', function () {
return gulp.src('public/**/*.html', {base: './'})
.pipe(
critical({
base: 'public/',
inline: true,
css: [
'public/c/css/main.css'
],
dimensions: [
{height: 720, width: 1280}
],
minify: true,
timeout: 120000
});
)
.on('error', function(err) {
gutil.log(gutil.colors.red(err.message));
})
.pipe(gulp.dest('./'));
});