Magento

Installing and Setting Up Grunt for Magento 2

The use of Grunt as a JavaScript task runner is a common way to perform frequent and routine tasks for frontend developers. To make the work with JavaScript more convenient, Grunt automates minification, compilation, linting, module testing, etc. All these actions can be performed by setting up the means of achieving in the Gruntfile. Considering the convenience and the fact that it can simplify and reduce the load of the developer by performing these tasks, many frontend developers use it. In this regard, the article will provide the instructions on how to install Grunt and use it for Magento 2.

How to install

1. You need to install NodeJS on your computer. The example of how to install it is below:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash – sudo apt-get install -y nodejs

2. You need to rename three files that are located in the Magento 2 roots and remove FILES.sample:

– grunt-config.json.sample;

– Gruntfile.js.sample;

– package.json.sample;

3. You need to install all npm packages. They are already named package.json.

#install all npm packages from package.json
npm i –save-dev

4. If your OS did not have Grunt before, you need to additionally install:

#installing grunt globally
sudo npm i grunt-cli -g

5. Grunt settings

  • In the folder dev/tools/grunt/configs/
  • Create file local-themes.js (this name of a file is in the grunt-config.json, and you can change it as you want)
  • The content of the file should be as follows:
‘use strict’;
module.exports = {
[THEME_ALIAS]: {
area: ‘frontend’,
name: ‘[VENDOR]/[THEME]’,
locale: ‘en_US’,
files: [
‘css/styles-m’,
‘css/styles-l’
], dsl: ‘less’ } };

VENDOR and THEME should be replaced with the path to the theme after app/design/frontend/[VENDOR]/[THEME].

6. You need to delete Magento cache

php bin/magento cache:clean

Compiling LESS with the help of Grunt on Magento

In the terminal of a project, you need to execute the following commands:

grunt clean:[THEME_ALIAS]grunt exec:[THEME_ALIAS]grunt less:[THEME_ALIAS]

You can also observe the changes of files:

grunt watch

More detailed about Grunt commands

Note that every command should be launched from the catalog of your Magento 2 project.

Grunt clean – use this command to delete the static files connected to the theme in the following catalogs: pub/static and var. 

Grunt exec – use this command for the republishing of the symbolic links to the source files in pub/static/frontend/

Grunt less – use this command to compile the CSS files with the help of symbolic links published in pub/static/frontend/. If you want to use the symbolic links which were published for the particular theme, use a more specific option of the command: grunt less: [THEME_ALIAS].

Grunt watch – use this command to track the changes of the source files, recompilation of .css files and the reloading of browser pages. ‘

Creating a task in Grunt

In the file Gruntfile.js, you can register tasks to execute multiple tasks with one command. It is located in the root of a project. 

grunt.registerTask(‘taskName’, [‘clean:THEME_ALIAS’, ‘exec:THEME_ALIAS’, ‘less:
#Example:
grunt.registerTask(‘compile’, [‘clean:theme’, ‘exec:theme’, ‘less:theme’]);

P.S. It should be added after the 108th line before the }; in the file Gruntfile.js

Now, the styles can be generated by one command:

grunt complete

P.S: compile – can be replaced with the name of a task. 

nodejs:

npm: 6.14.9

grunt-cli: v1.3.2

grunt: v1.0.4

#To check whether the Node.js installed:
node -v
————————————————————–
#To confirm that you have installed npm:
npm -v
————————————————————–
#To check the version of grunt:
grunt –version

Installation of Node.js v10.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash –
sudo apt-get install -y nodejs

If you want to delete Node.js and npm, you can use the following command:

sudo apt remove nodejs npm

Concluding remarks

Working with Grunt can significantly reduce the load on the Magento developer because it makes the completion of routine tasks much more convenient and effective. Especially, the development of a store with Grunt could become an integral part of every frontend programmer. In our blog, we also provide other articles on how to improve your skills as an eCommerce specialist and acquire new knowledge.

Related Articles

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments