critical.js

let optional = {
	'.btn': ['padding', 'border', 'text-align', 'display']
};

const critical = require('critical');

critical.generate({
	base: './dist/',
	src: 'index.html',
	css: [ 'css/main.css' ],
	target: {
		css: 'css/critical.css',
		uncritical: 'css/async.css'
	},
	width: 1340,
	height: 600,
  ignore: {
    atrule: ['@font-face'],
		rule: [/hljs-/, /code/],
		decl: (node, value) => {
			let { selector } = node.parent;

			if(!(selector in optional)){
				return false;
			}

			return !optional[selector].includes(node.prop);
		},
	}
});

console.log('ok');

gulpfile.js

const gulp = require('gulp');
const less = require('gulp-less');
const gcmq = require('gulp-group-css-media-queries');
const critical = require('critical');
const webp = require('gulp-webp');


//============ critical settings =========
let pages = ['index', 'gallery']
let optional = {
  '.btn': ['padding', 'border', 'text-align', 'display']
};

function criticalCss(done) {
  pages.forEach(async page => {
    await critical.generate({
      base: './dist/',
      src: `${page}.html`,
      css: ['css/main.css'],
      target: {
        css: `css/${page}-critical.css`,
        // uncritical: `css/${page}-async.css` - не генерируем дляя оптимального кеширования ! в server должен быть подключен main
      },
      width: 1340,
      height: 600,
      ignore: {
        atrule: ['@font-face'],
        rule: [/hljs-/, /code/],
        decl: (node, value) => {
          let {
            selector
          } = node.parent;

          if (!(selector in optional)) {
            return false;
          }

          return !optional[selector].includes(node.prop);
        },
      }
    });
  });
	done();
}
//========================================


function html(){
	return gulp.src('./src/*.html')
				.pipe(gulp.dest('./dist'));
}

function css(){
	return gulp.src('./src/css/main.less')
				.pipe(less())
				.pipe(gcmq())
				.pipe(gulp.dest('./dist/css'));
}

function images(){
	return gulp.src('./src/img/*')
				.pipe(gulp.dest('./dist/img'));
}

function fonts() {
	return gulp.src('./src/fonts/*')
				.pipe(gulp.dest('./dist/fonts'));
}

function images2webp(){
  return gulp.src('./src/img/* ')
        .pipe(webp())
				.pipe(gulp.dest('./dist/img'));
}

gulp.task('html', html);
gulp.task('css', css);
gulp.task('images', gulp.parallel(images, images2webp));
gulp.task('critical', criticalCss);

gulp.task('build', 
  gulp.series(
    gulp.parallel(html, css, fonts),
    criticalCss
  ) 
);

server.js

let asyncCss = `<script>
function loadStyle(url){
	let link = document.createElement('link');
	link.href = url;
	link.rel = 'stylesheet';
	document.body.appendChild(link);
}
loadStyle('css/main.css');
</script>`;

const express = require('express');
const path = require('path');
let fs = require('fs');

const app = express();

app.use('/css', express.static(path.resolve(__dirname, './dist/css')));
app.use('/js', express.static(path.resolve(__dirname, './dist/js')));
app.use('/img', express.static(path.resolve(__dirname, './dist/img')));
app.use('/fonts', express.static(path.resolve(__dirname, './dist/fonts')));

app.get('*', function (request, response) {
  let page = ('page' in request.query) ? request.query.page : 'index';

	let isCritical = 'crit' in request.query;
	let incAsync = 'async' in request.query;

	let criticalCss = fs.readFileSync(`./dist/css/${page}-critical.css`).toString('UTF-8');
	let html = fs.readFileSync(`./dist/${page}.html`).toString('UTF-8');
	
	if(isCritical){
		html = html.replace('<link rel="stylesheet" href="css/main.css">', `<style>${criticalCss}</style>`);

		if(incAsync){
			html = html.replace('</body>', `${asyncCss}</body>`);
		}
	}
	
	response.send(html);
});

app.listen(3000);

//