What Is Grunt In Magento2 ? Installation Process

I'm sometimes a little lazy, especially for repetitive tasks. Over and over, I don't like to do the same things. I'm more interested in writing code, thinking about solutions and things like that - it's not my business to waste time doing the same thing 10 times.

• Process of Installing Grunt

  Follow the easy steps for Magento 2 Grunt Setup

  • Install Node.js

    Set up node.js anywhere on your computer, an installation example below of NodeJS:

    curl -sL https://deb.nodesource.com/setup_12.x | Sudo -E bash -

    sudo apt-get install -y nodejs

    other NodeJs :https://github.com/nodesource/distributions#debinstall

  • root directory of Magento

    The package gruntfile.js.sample needs to be renamed in gruntfile.js (erase .sample from the file name).

    Do the same for .json.sample file kit and for grunt-config.json.sample . You will activate the files with this operation.

    Three files should be renamed:

    • gruntfile.js
    • package.json
    • grunt-config.json
  Talk To Jeet

  • node.js project dependency Installation

    Install (or update) your Magento instance's node.js project dependency, including Grunt Exec Magento 2. To do this, execute the following commands in an instant:

    sudo npm install

    sudo npm update

    Build folder after operation in the root directory node_modules folder

  • Grunt cli Installation

    Deploy Grunt cli  in Magento root directory by Just following the order:

    sudo npm install -g grunt-cli

  • grunt-config.json file Replacement

    Open the grunt-config.json file and add the following in Magento's root directory

    { "themes": "dev/tools/grunt/configs/local-themes" }

    with:

    { "themes": "dev/tools/grunt/configs/themes" }

  • Add Theme

    Then, to Grunt Exec Magento 2 setup, you should add your theme, go todev/tools/grunt/configs/themes.js file and here add your theme to module.exports like:

    <theme> : { area:'<area>', name:'<Vendor>/<theme>' , locale:'<language>', files:[ '<path_to_file1>', //path to root source file '<path_to_file2>' ], dsl:'less' }

    Example:

    cloudy: { area: 'frontend', name: 'Mageants/cloudy', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' },

• Above notations used for:

  <Vendor>: vendor name.

  <theme>: You will usually align the theme directory name with your theme code.

  <language>: He code subtag format is defined, such as en_US. Here you can mention just one locale. Build a more theme statement, defining another language meaning, to modify this theme with another locale.

  en_US" is a local if US store– en_US, de_DE if German, ru_RU(Russia), and so on.

  <area>: Code of area can be frontend or adminhtml.

  <path_to_file>: The root source file path, in relation to app/design/frontend/<Vendor>/<theme>/web directory.

  All the root source files in the theme must be specified. When the theme inherits from a specific subject and does not have root source files, define the root source files.

  Once all the steps above have been finished, we change the code to Magento 2 Grunt Less file.

  The next move is to execute Grunt Exec Magento 2. Make sure that you execute your installation directory Magento commands.

  grunt clean: <theme name> - (known as grunt clean command)emoves static files in the pub/static and var folders linked to a theme.

  Example: grunt clean:cloudy

  grunt exec: <theme name> - Republish explicit connections to the source files pub/static/frontend/ directory. Use grunt exec: to republish a particular theme's symlinks.

  grunt less: <theme name> Compile CSS files with the published symlinks in pub/static/frontend/ directory. Use grunt less:<theme> Use the published symlinks for a particular theme.

• You can use grunt in the root directory of Magento below:

  grunt clean:cloudy

  grunt exec:cloudy

  grunt less:cloudy

  Or

  grunt clean:cloudy && grunt exec:cloudy && grunt less:cloudy

• grunt exec grunt less made Compilation very easy?

  You may have faced the problem that the CSS updates are not mirrored in the front line if you are the front-end developer in Magento 1 and attempted to move to Magento 2 projects. This is due to an idea that was implemented in Magento 2 entitled "Less."

  The code must be compiled and stored as CSS with "Less" which is a static element and therefore does not automatically represent it at the frontend. You may have tried to resolve this problem through several releases and several cache flush, which is a tiresome process and in many cases may not be the right solution. This can be done more easily.

  The use of terminals (such as Putty / X-Shell) is recommended for Windows users and the default terminal is available for MAC / Linux users. Regardless of OS, users must use a terminal in "Sudo" mode as their base, namely MAC, Windows, Linux, etc.

Conclusion:

The installation directions available on our website are now published. To start up or go directly to the Guide, use the details on this page. The first move will take you to the direction of your installation. It is very important to ensure that your server meets the minimum requirements for Magento 2.