light-boilerplate/gulpfile/tasks/optimize-criticalCss.js

Lightweight and powerfull startkit for your next project!

/**
 * Critical CSS
 * @description Generate Inline CSS for the Above the fold optimization
 */

import meow from '../../config.json';
import gulp from 'gulp';
import critical from 'critical';

function criticalCss(cb) {
  meow.cssabove.sources.forEach(function(item) {
    return critical.generate({
      inline: meow.cssabove.inline,
      base: meow.dist.markup,
      src: item,
      /**
       * @root - dest
       *
       * if (inline) {
       *   meow.templatePath.root
       * } else {
       *   meow.templatePath.css
       * }
       *
       * and don't forget to rename destFilename
       */
      dest: meow.templatePath.root + meow.cssabove.destFilename,
      minify: meow.cssabove.minify,
      width: meow.cssabove.width,
      height: meow.cssabove.height,
    });
  });
  cb();
}

export default criticalCss;