Magento 2 Grunt watch

Installing and configuring Grunt

Magento has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:

  1. Install node.js to any location on your machine.
  2. Install Grunt CLI tool globally. To do this, run the following command in a command prompt:
    npm install -g grunt-cli
    
  3. Install Grunt in your Magento directory. To do this, run the following commands in a command prompt:
    cd <your_Magento_instance_directory>
    npm install grunt --save-dev
    
  4. Install (or refresh) the node.js project dependency for your Magento instance. To do this, run the following commands in a command prompt:
    cd <your_Magento_instance_directory>
    npm install
    npm update
    
  5. Add your theme to Grunt configuration. To do this, in thedev/tools/grunt/configs/themes.js file, add your theme to module.exports like following:
    module.exports = {
        <theme>: {
            area: 'frontend',
            name: '<Vendor>/<theme>',
            locale: '<language>', 
            files: [
                '<path_to_file1>', //path to root source file
                '<path_to_file2>'
            ],
            dsl: 'less'
        },
    

    Where the following notation is used:

    • <theme>: your theme code, conventionally should correspond to the theme directory name.
    • <language>: specified in the ‘code_subtag’ format, for example en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language
    • <path_to_file>: path to the root source file, relative to theapp/design/frontend/<Vendor>/<theme/>web directory. You need to specify all root source files of the theme. If your theme inherits from a certain theme, and does not contain its own root source files, specify the root source files of the parent theme.
  6. (Optional) If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser.

Grunt commands

The following table describes the grunt commands you can use performing different customization tasks. Run all commands from your Magento installation directory.

Grunt task Action
grunt clean:<theme>

For example:

grunt clean:blank
Removes the theme related static files in thepub/static and var directories.
grunt exec:<theme>
Republishes symlinks to the source files to thepub/static/frontend/<Vendor>/<theme>/<locale> directory.
grunt less:<theme>
Compiles .css files using the symlinks published in thepub/static/frontend/<Vendor>/<theme>/<locale> directory
grunt watch
Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser pages (you need to haveLiveReload installed for you browser)

etap watch

  1. exécuter  grunt exec:<theme>
  2.  grunt watch

Leave a Comment