Генерация критического CSS для всех.html страниц с Gulp

Question

Итак, есть этот пакет npm, который Google предлагает генерировать критически важный 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 для?

Любая помощь будет принята с благодарностью!

Answer 1

У меня это работает с использованием gulp.src. Единственная проблема заключается в том, что на сайтах с большим количеством html-файлов уходит добрых 3 минуты, и он подвержен сбоям, если вы одновременно выполняете другие действия на своем компьютере. Я действительно нашел этот пост, пытаясь найти более эффективный способ сделать это.

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));
});

Answer 2

Вы можете сделать что-то вроде (псевдокод следует):

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'
        });
   }))
});

Используя глоток-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');
      });
    });
});