Running Grunt

About

Grunt tool is used by Magento to improve frontend developer experience. It allows you to see where some particular style is coming from, and autoregenerate styles when you save the less files.

Install grunt

  1. Install node.js on your machine.

  2. Install grunt CLI tool:

    npm install -g grunt-cli

  3. Create files for grunt and install dependencies:

    cd <magento_root>

cp package.json.sample package.json &&\
cp Gruntfile.js.sample Gruntfile.js &&\
cp grunt-config.json.sample grunt-config.json &&\
npm update

Prepare config

  1. Create local-themes.js in the dev/tools/grunt/configs directory:

    cp dev/tools/grunt/configs/themes.js dev/tools/grunt/configs/local-themes.js

  2. Add breeze themes to the newly created local-themes.js file:

    'breeze-blank': {
    area: 'frontend',
    name: 'Swissup/breeze-blank',
    locale: 'en_US',
    files: [
        'css/default',
        'css/checkout',
        'css/deferred-default',
        'css/deferred-checkout',
        'css/email',
        'css/email-inline'
    ],
    dsl: 'less'
},
'breeze-evolution': {
    area: 'frontend',
    name: 'Swissup/breeze-evolution',
    locale: 'en_US',
    files: [
        'css/default',
        'css/checkout',
        'css/deferred-default',
        'css/deferred-checkout',
        'css/email',
        'css/email-inline'
    ],
    dsl: 'less'
}

  3. Optionally, enable inline source maps in dev/tools/grunt/configs/less.js:

    --- dev/tools/grunt/configs/less.js
+++ dev/tools/grunt/configs/less.js
@@ -22,6 +22,7 @@
         sourceMap: true,
         strictImports: false,
         sourceMapRootpath: '/',
+        sourceMapFileInline: 'true',
         dumpLineNumbers: false, // use 'comments' instead false to output line comments for source
         ieCompat: false
     },

Running grunt

Do not forget to replace breeze-evolution with your theme

grunt clean:breeze-evolution &&\
grunt exec:breeze-evolution &&\
grunt less:breeze-evolution &&\
grunt watch:breeze-evolution

Result:

Screenshot