So, there is this npm package Google suggests to generate critical CSS:
var critical = require('critical');
gulp.task('critical', function (cb) {
critical.generate({
base: 'app/',
src: 'index.html',
dest: 'css/index.css'
});
});
It is actually an awesome tool which works like a charm. The only disadvantage is that it only works for a single file in Gulp as opposed to other tasks that can be called with gulp.src('app/*.html')
for all matching files.
So I decided to list all my pages in an array and iterate through them:
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'
});
}
});
which proved to be a working solution too (except some node.js memory issues).
The problem now is that I have to list the pages manually in the array. So I wonder if there is a way to generate such a list automatically with a function similar to gulp.src('app/*.html')
eg to include all .html pages from a selected folder to generate critical CSS for?
Any help would be greatly appreciated!
You could do something like (pseudocode follows):
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'
});
}))
});
Using gulp-foreach .
Alternatively, glob-fs would be useful too and I include example code I wrote below that manipulates individual files from a stream and then writes them out with a new file name.
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');
});
});
});
I have this working using gulp.src. only issue is that it takes a good 3 minutes to complete on sites with many html files and is susceptible to crashing if you are doing other things on your computer at the same time. I actually found this post by trying to find a more efficient way to do this.
gulp.task('criticalCSS', ['compile-html', 'compile-styles'], function() {
return gulp.src(config.dest.root + '**/*.html')
.pipe(critical({
base: config.dest.root, // "app/" which is the root of my build folder
inline: true,
css: config.dest.css + styleBundleFilename, // "app/css/mainCssFilename"
dimensions: [{
width: 320,
height: 480
},{
width: 768,
height: 1024
},{
width: 1280,
height: 960
}],
ignore: ['font-face']
}))
.on('error', function(err) { log(err.message); })
.pipe(gulp.dest(config.dest.root));
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.