Contents
What are the grunt rules for Magento 2?
Magento 2 Grunt rules require specifying all root source files of the theme. How to solve the issue when your theme inherits from a certain theme and does not contain its own root source files? The solution is quite straightforward: specify the root source files of the parent theme instead.
How to compile.less files in Magento 2?
The topic describes how to install, configure, and use Grunt JavaScript task runner to compile .less files in Magento 2. Make sure that you set your Magento application to the developer or default mode. The default mode sets the Less compilation mode to Server-side Less compilation.
How to install Grunt CLI tool on Magento?
Install Grunt CLI tool globally. To do this, run the following command in a command prompt: From the directory, copy and paste the contents of the following files: Install (or refresh) the node.js project dependency, including Grunt, for your Magento instance.
How to republish a theme in Magento 2?
Run all commands from your Magento installation directory. Removes the theme related static files in the pub/static and var directories. Republishes symlinks to the source files to the pub/static/frontend/ directory. Use grunt exec: to republish symlinks for a specific theme.
Which is the CSS file for Magento theme?
Magento compiles all theme’s .less files into two CSS files for each theme: styles-m.css and styles-l.css. As a result, your browser sees styles-m.css when you debug a theme. Therefore, it might be difficult to define which .css or .less file requires corrections.
Can you use a task runner with grunt?
Although the ecosystem around Grunt is huge, it continues to grow every day. Hundreds of plugins are already available, so you can use the task runner to automate just about anything on your Magento website. Furthermore, if you cannot find what you need, it is extremely easy to publish your own Grunt plugin.
What can you do with grunt in JavaScript?
Grunt is a contemporary JavaScript task runner which essentially simplifies repetitive tasks by automating compilation, minification, linting, unit testing, etc. It can do most of the aforementioned routine processes with zero effort, you only have to configure the task runner through a Gruntfile.
How to create a custom configuration file in Magento?
There are several ways to declare a custom configuration file. To use a custom file for Grunt configuration: Copy the default configuration file to the preferred location in the Magento instance directory. Do not change the file name. Open the grunt-config.json file in the Magento root and set configurations object as follows.
How are CSS files compile in Magento 2?
For each theme, Magento compiles all theme .less files into two CSS files: styles-m.css and styles-l.css. So when you debug a theme, your browser only sees styles-m.css and it might be difficult to define which .css or .less file requires corrections. For example: CSS source maps solve this issue.
How to install Node.js in Magento instance?
Install (or refresh) the node.js project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt: Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme to module.exports like following:
Which is the Watch Command in Magento 2?
After you run the exec command, run the clear command to clear the Magento cache, then run the watch command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. If you have LiveReload installed, run the grunt watch command, and the flow is even simpler: