Removing Unused CSS with gulp-purifycss in Laravel/PHP Projects

Create a gulp task:

gulp.task('pure', function() {
    return gulp.src('./public/build/css/all-0571801a40.css')
        .pipe(purify(['**/public/build/**/*.js', '**/resources/views/**/*.php'], {minify: true}))
        .pipe(gulp.dest('./public/pure/'));
});

And execute it via:

gulp pure

Add it to your pipeline or just run it as a once-off to get insights into what rules are removed. Can un-minify the original vs. cleaned CSS file to identify unused CSS project wide and then work on removing it upstream.

Call gulp Task from Laravel Elixir

To call the task from a Laravel Elixir pipeline, use the mix.task method:

elixir(function(mix) {
    mix.task('pure');
});

Sources

Tags

 gulp.js  gulp-purifycss  purifycss  Laravel  CSS  web development  Laravel Elixir