The Case of the Missing Less Cache Commands

One the curious/frustrating bits of approaching Magento 2 as a traditional, full-stack Magento 1 developer, is the seemingly incomplete php bin/magento. While this command allows you to clear your Magento cache

php bin/magento cache:clean

and a command to generate “static content” (front end javascript, css, etc. files not generated by the PHP code in the application)

php bin/magento setup:static-content:deploy

It doesn’t contain commands that clear out the Less CSS cache in var/view_preprocessed. The problem? The PHP team at Magento seems to have shifted that responsibility to grunt, the front end build tool for Magento.

The Magento dev docs site has decent instructions (for 2.0 and 2.1) on setting up grunt (which has a precursor of setting up npm (which has a precursor of installing node)). Assuming you can pass that bar, the following two commands clears the generated CSS from both pub/static and var/view_preprocessed from the Magento/blank and Magento/luma themes.

grunt clean:blank
grunt clean:luma

The syntax here is a little weird – instead of calling a clean command with a parameter (blank, luma above) the parameter is actually part of the command name. I’m not 100% clear if this is a grunt thing, or a Magento core team thing.

It’s also a little weird in that you may be left wondering how to refer to your own themes in this syntax. A theme’s full identifier in Magento 2 includes a package name (Magento) and a theme name (blank) i.e. Magento/blank. However, the grunt command doesn’t include this theme name.

It turns out you need to add your theme to a configuration file – the theme Magento/blank is added below

#File: dev/tools/grunt/configs/themes.js
/* ... */
blank: {
    area: 'frontend',
    name: 'Magento/blank',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'css/email',
        'css/email-inline'
    ],
    dsl: 'less'
},    
/* ... */

The key for this object (blank above) ends up becoming the value you use with grunt. Looking at this file, it seems you need to manually tell grunt which files makeup your theme, and that each identified theme can only clear our a single locale (en_US above).