PurgeCSS

config.rb

# External pipeline for Middleman
activate :external_pipeline,
  name: :gulp,
  command: "gulp build --production",
  source: '.tmp/gulp',
  latency: 1

gulpfile.js

const del = require('del');
const gulp = require('gulp');
const gulp_purgecss = require('gulp-purgecss');
const gulp_sass = require('gulp-sass');
const pump = require('pump');
const yargs = require('yargs').argv;

const folders = {
  build: './build',
  css: '/assets/stylesheets',
  source: './source',
  tmp: './.tmp/gulp'
}

/**
 * Configuration for Gulp
 */
const config = {
  css: {
    destination: folders.tmp + folders.css,
    source: folders.source + folders.css + '/**/*.{css,sass,scss}'
  },
  watch: {
    ignoreInitial: false
  }
};

/**
 * Gulp task
 * Empties and removes the build folder
 */
const clean_build = () => del([folders.build + '/**']);

/**
 * Gulp task
 * Empties the temporary folders
 */
const clean_tmp = () => del(['./.tmp/**/*.{css,gif,jpeg,jpg,js,png,svg}']);

/**
 * Gulp task
 * Processes and minifies CSS and Sass-files
 */
const css = () => {
  return pump([
    gulp.src(config.css.source),
    gulp_sass({
      // Compress (minify) if called during build
      outputStyle: yargs.production === true ? 'compressed' : 'nested'
    }).on('error', gulp_sass.logError),
    gulp.dest(config.css.destination)
  ]);
};

/**
 * Gulp task
 * Purges CSS files; removes unused selectors and rules
 */
const purge = () => {
  console.log('== Purging CSS files');

  return pump([
    gulp.src(folders.build + folders.css + '/**/*.css'),
    gulp_purgecss({
      content: [folders.build + '/**/*.html', folders.build + '/**/*.js']
    }),
    gulp.dest(folders.build + folders.css)
  ]);
};

/**
 * Export tasks
 */
exports.after = gulp.series(purge);
exports.build = gulp.series(
  gulp.parallel(clean_tmp, clean_build),
  gulp.parallel(css));