Example of external_pipeline which removes unused CSS

gnechita · March 5, 2020, 9:16am

Hey everyone. I’ve inherited a Middleman project and I wanted to do some optimisations.

One big optimisation I want to do is to activate an external pipeline to exclude unused CSS from the final stylesheet.

Does anyone have any examples of how they achieved this in Middleman?

tomrutgers · March 5, 2020, 4:57pm

Unfortunately not, but please do report back when you find some, I’m also interested!

gnechita · March 9, 2020, 8:25am

I’ve modified a gulpfile I’ve found on github and it has an “after” gulp task which I need to run manually at this point, but it does the job.

The Purge CSS task is not ideal, it removes some classes it shouldn’t, you might need to whitelist some CSS classes which get removed in the purging process: https://purgecss.com/whitelisting.html

I tried to add after_build instructions to make the purging process run automatically, but I didn’t find a way to invoke the gulp task from the after_build hook, invoking the command via thor.run didn’t work for me.

gist.github.com

https://gist.github.com/nechita/3ad6351a82a47658ecd3d0d720257725

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',

This file has been truncated. show original