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

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

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

• purifycss github
• gulp-purifycss github