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:
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%
Create Theme Files and use them in Magento 2
In Magento 2, themes are stored in the file system in the following pattern:
For a minimal setup, we create a theme which inherits everything from Luma. So we create the following files:
Vendor: Theme Name
Two trivia we want to change right now, so that we can see right away that we no longer use the original Luma theme:
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:
Afterward, the following steps should be executed exactly once before starting to work:
Clean static files and caches:
Collect resources and generate static files for our theme:
Initialize the preprocessing:
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:
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).
In some cases (e.g. adding new files) it might be necessary to initialize everything again:
General “unidentified” problems
The following checklist should reset the system and make changes visible:
Delete the static files relevant for the theme in:
Delete the Magento caches (Backend, bin/magento CLI or n98-magerun2)
bin/magento setup:static-content:deploy <lang_LANG>
Start Grunt workflow