因此,Google 建议使用这个 npm 包来生成关键 CSS:
var critical = require('critical');
gulp.task('critical', function (cb) {
critical.generate({
base: 'app/',
src: 'index.html',
dest: 'css/index.css'
});
});
它实际上是一个非常棒的工具,就像一个魅力。唯一的缺点是它仅适用于 Gulp 中的单个文件,而不是可以使用 gulp.src('app/*.html')
为所有匹配文件调用的其他任务。
所以我决定将所有页面列在一个数组中并遍历它们:
var pages = ['index', 'pricing'];
gulp.task('critical', function (cb) {
for (var i = 0; i < pages.length; i++) {
critical.generate({
base: 'app/',
src: pages[i] + '.html',
dest: 'css/' + pages[i] + '.css'
});
}
});
这也被证明是一个可行的解决方案(除了一些 node.js 内存问题)。
现在的问题是我必须在数组中手动列出页面。所以我想知道是否有一种方法可以使用类似于 gulp.src('app/*.html')
的功能自动生成这样的列表,例如包含选定文件夹中的所有 .html 页面以生成关键 CSS?
如有任何帮助,我们将不胜感激!
最佳答案
你可以做类似的事情(伪代码如下):
var foreach = require('gulp-foreach');
gulp.task('default', function () {
return gulp.src('./yourPathTo/*.html')
// treats each file in gulp.src as a separate stream
.pipe(foreach(function (stream, file) {
// see in next code for example of following
var fileBase = file.path.stringOptoRemove Extension;
critical.generate({
base: 'app/',
src: file.path,
dest: 'css/' + fileBase + '.css'
});
}))
});
使用 gulp-foreach .
或者,glob-fs也会很有用,我包含了我在下面编写的示例代码,该代码操作流中的单个文件,然后使用新文件名将它们写出。
var gulp = require('gulp');
var glob = require('glob-fs')({ gitignore: true });
var html2text = require('html-to-text');
var fs = require('fs');
var path = require('path');
gulp.task('default', function () {
glob.readdirStream('build/*.html')
.on('data', function (file) {
console.log(file.path);
html2text.fromFile(file.path, (err, text) => {
if (err) return console.error(err);
// strip off extension and parent directories
var filename = path.basename(file.path, '.html');
// I assume you want a.html text to be written to 'build/txt/a.txt'
fs.writeFileSync(path.join('build/txt', filename + '.txt'), text, 'utf8');
});
});
});
关于javascript - 使用 Gulp 为所有 .html 页面生成关键 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48672323/