How to configure the theme to use Grunt?

Set up Grunt Environment

When the installation is finished, the next step is to setup the Grunt environment. All described steps are covered in the official Magento 2 documentation, although there it’s not as compactly summarised as it is here.

First of all, we need node.js for our stack.

Then we can install the Grunt CLI

npm install -g grunt-cli

followed by the initialization of the project specific dependencies

cd && npm install

To test if everything is correctly installed, use the following call:

$ grunt
Running "default" task

I'm the default task and at the moment I'm empty, sorry :/

Done, without errors.


Execution Time (2016-02-01 08:54:44 UTC)
loading tasks  393ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 98%
default          5ms  ▇▇ 1%
Total 400ms

Create Theme Files and use them in Magento 2

In Magento 2, themes are stored in the file system in the following pattern:

app/design/frontend///

For a minimal setup, we create a theme which inherits everything from Luma. So we create the following files:

/', DIR );

//theme.xml --> Vendor: Theme Name Magento/luma

Two trivia we want to change right now, so that we can see right away that we no longer use the original Luma theme:

// app/design/frontend///web/css/source/_theme.less @navigation__background: @color-blue1; @navigation-desktop-level0-item__color: @color-white;

Then we select the theme in Magento 2’s backend:

Stores > Configuration > Design > Design Theme

Start the Frontend Workflow with Grunt

Before we can really get to work, we need to tell Grunt that we have just created a new theme. And here is the file entry that does the trick:

// dev/tools/grunt/configs/themes.js // Add following to config array: : { area: 'frontend', name: 'Vendor/Theme', locale: 'de_DE', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }

Afterward, the following steps should be executed exactly once before starting to work:

Clean static files and caches:

grunt clean

Collect resources and generate static files for our theme:

grunt exec:

Initialize the preprocessing:

grunt less:

Afterward, reload the frontend page! The first-page view might lead to excessively long load times since Magento 2 starts the preprocessing in the background which means that a great number of files need to be processed.

Voilà! We have successfully changed Magento’s background color and font color in the menu using our own workflow. From now on, we can start the watch task:

grunt watch

If we change a LESS file, Grunt will automatically update all necessary files so we only have to reload the frontend (with the LiveReload browser plugin installed, you won’t even need to do that manually).

Trouble Shooting

Changing Files

In some cases (e.g. adding new files) it might be necessary to initialize everything again:

grunt clean

grunt exec:

grunt less:

General “unidentified” problems

The following checklist should reset the system and make changes visible:

Delete the static files relevant for the theme in:
pub/static/frontend/
var/view_preprocessed/less/
var/view_preprocessed/source/
Delete the Magento caches (Backend, bin/magento CLI or n98-magerun2)
bin/magento setup:static-content:deploy <lang_LANG>
Start Grunt workflow

You can use below code to configure you custom theme for grunt in theme.js file:

blue: {
        area: 'frontend',
        name: 'Colors/blue',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/my'
        ],
        dsl: 'less'
},

Above cofiguration as per my theme path : app\design\frontend\Colors\blue, You have to change as per your vendor(Colors) and theme name(blue),

And run command:

grunt exec:blue  
grunt less:blue
grunt watch

You can copy file /dev/tools/grunt/configs/themes.js to /dev/tools/grunt/configs/local-themes.js

Then edit Gruntfile.js file in your magento root folder :

At line 19, change dev/tools/grunt/configs/themes to dev/tools/grunt/configs/local-themes

Hope that helps.