Code Responsible

Skip navigation

Grunt SassyClean

sassyclean

CSS-preprosesors like Sass or Less are extremely powerful and useful when architecting a project’s CSS. While working at Evernote we used an approach in our Sass architecture that was similar to the SMACSS methodology. It was very useful, allowing us to take a modular approach in how we built pages for Evernote.com. Over time, I did start to find our Sass build started to get quite large due to the amount of partials being created. Eventually, a lot of these partials are no longer used and therefore slowing down our build. As a way to automate removing all these unused partials, I created the Grunt task SassyClean that checks for partials that aren’t being imported. The task has the option either to delete the files or display the file name to the console.

How it works

SassyClean scans a project’s scss partials and checks against other files to see if they are being referenced. If a partial is no longer being referenced it’s considered unused and will either be deleted or surfaced to the console.

Benefits

It’s extremely useful to have small modular code, but it also means more files. SassyClean does a good job of automating cleanup of a project’s build.

How to use

If you haven’t used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins. Once you’re familiar with that process, install this plugin with this command:

npm install grunt-sassyclean --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-sassyclean');

Example config

grunt.initConfig({
  sassyclean: {
    options: {
      modules: ['sass/modules/**/*.scss', 'sass/themes/**/*.scss', 'sass/layout/**/*.scss', 'sass/base/**/*.scss'],
      buildfiles: ['sass/**/*.scss'],
      remove: false,
      days: null
    },
  }
});

grunt.loadNpmTasks('grunt-sassyclean');
grunt.registerTask('default', ['sassyclean']);

Options

buildfiles

A reference to the directory of files that are being checked if any of the module files are referenced in the root sass files.

Modules

The modules option provides the ability to set an array of directories that contain Sass modules.

Remove

Remove gives the ability to automatically delete unused file reference from the project.

Days

If remove is set to true and days has a value, files will only be deleted if the file hasn’t been modified greater than the length of days.

Github

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

Leave a Reply

Comment Form