If you are a front end developer in Magento 1 and trying to move to Magento 2 projects, you might have faced the challenge of the CSS changes not getting reflected in the front end. This happens because of a concept called “Less” which has been introduced in Magento 2.
With “Less”, the code has to be compiled and saved as CSS which is a static content and hence it’s not reflected immediately in the frontend. You might have tried to resolve this issue by doing multiple deployments and multiple cache flush which is a tiresome job and might not be the appropriate solution in many situations. There is a better way of handling this. The below solution will help you overcome this challenge.
Windows users are advised to use terminals (like Putty/X-Shell) and MAC/Linux users can use the default terminal. Irrespective of the OS (like MAC, Windows, Linux etc), users are required to use the terminal in “sudo” mode as a root user.
‘Less’ Compilation Made Easier with ‘Grunt’ in Magento 2
Note : Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as package.json and Gruntfile.js respectively
Step 1:
Install node.js (any location in your system)
Grunt modules are installed by means of npm ( Node.js package manager ), so you need to have a stable version of node.js
example: >= 0.8.0 (Odd version number are considered as an unstable versions).
Step 2:
In order to start your Grunt installation globally, run this command
Step 3:
Now we have to install the node.js in the magento root directory for the specific project that we are going to work with Grunt.
Next is to run the following commands
Step 4:
In this step we are going to add your theme to Grunt configuration file, navigate to “dev/tools/grunt/configs/themes.js” and add you theme like below examples:
Example:
Now the installation process is completed, the next step is to run the Grunt commands.
- “grunt clean:
” – this command removes all the static files of the css and js files in static directories
Example: “grunt clean:blank “
- “grunt exec:
” – this command republishes symlinks to the static directories
- “grunt less:
” – this command compile all the css file us ing the symlinks in this location “pub/static/frontend/ / / “
- “grunt watch” – this is the final command to start the grunt tool to track the changes done to the main files like .less and recompiles into css files
Every time you change any this in the source file, “grunt watch” will show notification in the terminal about the specific change and recompiles the changes simultaneously.
We hope you enjoyed our blog and learnt about the power of “Grunt” command which simplifies the job of a front end developer. If you might have any queries/thoughts, please feel free to add your valuable comments. We will be more than happy to help.
Does your eCommerce website need high performance and scalability? Switch to Magento 2 and begin your brand new website implementation with our Magento Services. Let’s Talk.
