How to use critical - 10 common examples

gulp.task('_pug',  () => {
	return gulp.src(`${dev}/pug/*.pug`)
	.pipe(pug({
		pretty: true
	}))
	.pipe(critical({                            // генерируем критический CSS для быстрой загрузки страниц
		base: `${build}/`,                      // из всех наших файлов
		minify: true,                           // с минификацией
		inline: true,
		width: 1920,
		height: 1280,
		css: [`${build}/css/style.min.css`]     // путь к вашему основному файлу стилей, или несколько файлов через звпятую
	}))
	.on('error', notify.onError({
		title: 'PUG',
		message: '<%= error.message %>'
	}))
	.pipe(gulp.dest(`${prod}`));
});

async snapshot(isProduction = true) {
    let cssBundles = this.getCSSBundles();
    let content = await snapshot({
      page: this,
      cssBundles,
      isProduction
    });

    if (cssBundles.length > 0) {
      // Extract critical css
      let criticalCss = await critical.generate({
        html: content,
        base: this.options.outDir,
        folder: this.options.outDir,
        minify: true,
        ignore: ['@font-face', /url\(/]
      });

      content = content.replace('/* BLAZINGLY INLINE CRITICAL CSS */', criticalCss);
      await fs.writeFile(path.join(this.outDir, 'critical.css'), criticalCss);
    }

    await fs.writeFile(path.join(this.outDir, 'index.html'), content);
  }
}

function processCriticalCss(element, i, callback) {
  const url = argv.url || kittn.cssabove.url
  const criticalSrc = `${url}${element.url}`
  const BASE_PATH = path.resolve(__dirname, '..')
  const criticalDest = `${`${BASE_PATH}/${kittn.src.templates}${element.template}`}_critical.min.css`
  console.log(`-> Generating critical CSS: ${chalk.cyan(criticalSrc)} -> ${chalk.magenta(criticalDest)}`)

  critical.generate(
    {
      src: criticalSrc,
      dest: criticalDest,
      inline: kittn.cssabove.inline,
      ignore: kittn.cssabove.ignore,
      include: kittn.cssabove.include,
      css: [
        kittn.dist.css + kittn.cssabove.cssfile
      ],
      minify: kittn.cssabove.minify,
      height: kittn.cssabove.height,
      width: kittn.cssabove.width
    },
    (err, output) => {
      callback();
    }

return new Promise((resolve, reject) => {
                critical
                    .generate({
                        ...options,
                        ...TASK_CONFIG.critical
                    })
                    .catch(e => {
                        console.error(e)
                        reject(e)
                    })
                    .then(output => {
                        gulp
                            .src(path.resolve(process.env.PWD, source))
                            .pipe(
                                htmlreplace(
                                    {
                                        critical: {
                                            src: null,

gulp.task('critical', function () {
  return gulp.src('src/index.html')
    .pipe(gulp.dest('dist'))
    .pipe(critical({
      css: ['dist/styles/main.css'],
      height: 700,
      inline: true,
      minify: true
    }))
    .pipe($.minifyHtml())
    .pipe(gulp.dest('dist'));
});

langs.forEach(lang => {
    return gulp.src(`${dirs.dest}/index-${lang}.html`)
      .pipe(critical({
        base: 'dist/',
        inline: true,
        css: 'dist/styles/main.min.css',
        minify: true,
        ignore: [/url\(/, '@font-face', /print/]
      }))
      .pipe(htmlmin({
        collapseWhitespace: true,
        removeComments: true
      }))
      .pipe(rename({
        basename: 'index'
      }))
      .pipe(gulpif(lang !== 'en', gulp.dest(`${dirs.dest}/${lang}`), gulp.dest(`${dirs.dest}`)))
  })
});

module.exports.compile = () => {
  const base = task.dest('');

  const criticalOpts = config.critical;
  criticalOpts.base = base;

  const minifyOpts = config.htmlmin;

  return combine([
    empty(),
    critical(criticalOpts),
    minify(minifyOpts),
  ]);
};

gulp.task('critical', function () {
  return gulp.src('en/src/index.html')
      .pipe(critical({base: 'en/src', inline: true, css: ['css/style.min.css']}))
      .pipe(gulp.dest('en/src'));
});