Making changes during the development of your theme can take some time while you are waiting on removing the compiled files, recompiling, and reloading. To optimize the workflow and speed up the reloading of the changes, it is possible to use the built-in client-side Less compiler based on a JavaScript compilation. Using this client compiler might not work fast enough for you and require manual reloads. Another option is to use the Grunt tool to watch changes made in the .less files. In this recipe, we will see how to make use of this tool and update CSS files without the manual removing of files and refreshing the browser.
Using Grunt should only be needed on your local development setup; for production systems, you should use the built-in Magento Less compiler. Grunt is built on Node.js; in order to use it, you should first install Node.js in your system.
This recipe will explain how to install, configure, and use Grunt to monitor file changes and recompile the CSS scripts. This recipe is based on the theme configured in the Creating a new theme recipe of this chapter. When you use it on your own theme, change the names/files according to your theme needs:
- First, we need to install the Grunt command-line tool. As Grunt is a Node.js package, this installation is done through the Node.js package manager (npm):
npm install –g grunt-cli
- To install Grunt in your Magento project directory, navigate to the Magento 2 root directory of your installation and run the following:
npm install grunt –-save-dev
- After installing Grunt, the Node.js dependencies in your Magento project should be updated. To do so, run the following command from your Magento directory:
npm install npm update
- To allow Grunt to recompile your own theme, it should be declared in the
dev/tools/grunt/configs/themes.jsfile. This file configures the paths used to monitor file changes and the files that should be created. Add the following code to the file:genmato: { area: 'frontend', name: 'Genmato/default', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l', 'css/sample' ], dsl: 'less' }, - Run the initial setup of your theme files; this will create symlinks from the
pub/static/frontend/Genmato/defaulttheme directory to the source theme files (located inapp/design/frontend/Genmato/default):grunt exec:genmato
The following output displays the processing done by Grunt:
- Now that the symlinks are created, the Less files should be compiled; this will create the theme CSS files as they were configured in the
themes.jsfile in step 4:grunt less:genmato
This can be seen in the following screenshot:
- In order to display the CSS changes made automatically, install the LiveReload plugin for your browser from http://livereload.com/extensions/. When the plugin is installed, click on the icon to activate the live reloading of the CSS files. This should be done only on your local website URL.
- When making changes to the Less files in your theme, the Grunt watcher should be activated:
grunt watch
This will detect the changes once you save a theme Less file and trigger the compilation of your Less code to a CSS file.
- Now you can make all your necessary changes, for example, we could change the color of the navigation background:
app/design/frontend/Genmato/default/web/css/source/_theme.less@genmato__orange: #FCBF45; @navigation__background: @genmato__orange;
After saving the file, the compilation of the CSS is triggered and a new CSS file is stored for your theme:
- The live reload plugin will detect the changed CSS files and reload and apply them in your browser without reloading the page, which should now display the new color for the navigation background:
The Grunt watch command looks for changes made to the Less files in the template directory. When a change is detected, it will trigger the recompilation of the CSS files of the theme. To see what files Grunt is watching, you can run the watch command with the –v option:
grunt watch –v
This will display all modules loaded and give you more debugging information for which file has been changed and the actions that it is running.
When using the Grunt method and deploy feature in Magento in the same setup, make sure that you run the command starting from step 5 again; otherwise, the file changes will not be detected.
When using the LiveReload plugin, it will create a web socket connection to the LiveReload service running on TCP port 35729. Through this socket, Grunt will notify when the compilation of the CSS file is completed and what file has changed so that the LiveReload plugin can reload that file and apply it in the browser:
