Install & Configure Grunt

Before installing Grunt, it’s worth mentioning that if you are using docker-magento, all of these steps have already been taken care of for you! All you need to do is run bin/setup-grunt, and the installation & configuration of Grunt is magically done for you. Just be sure to create & enable the theme you wish to customize before running bin/setup-grunt.

You can go ahead and mark this lesson as complete if you wish, just remember that anytime you want to run grunt, use the bin/grunt command. But if you’d like to know how the Grunt setup works, just keep following along.

Assuming we already have Node.js installed on our machine, we can install the grunt command line globally with:

npm install -g grunt-cli

Before running grunt, we’ll also need to install some prerequisite packages. Magento comes with a few files in the root of your project:

• package.json.sample
• Gruntfile.js.sample
• grunt-config.json.sample

We’ll need to copy all of these files to the same locations, but without the .sample suffix.

cp package.json.sample package.json
cp Gruntfile.js.sample Gruntfile.js
cp grunt-config.json.sample grunt-config.json

After doing so, all NPM dependencies can be installed with:

npm install

This looks at the package.json file that we just created, and installs all dependencies in that file.

Next, we’ll configure Grunt for Magento so it will know where to look for the configuration.

Grunt works from a Gruntfile, which is basically a configuration file that contains a function with a list of instructions that Grunt executes. If we take a look at this file in the root of our Magento folder, we’ll see that it contains a lot of configuration and tooling to get it working with Magento.

Now let’s open up the grunt-config.json file. This file defines the location to look for to find the theme configuration file.

Notice that it is set to:

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

This value is just fine, but we need to create this file. We’ll do that by going to the dev/tools/grunt/configs directory. This directory contains files that will define all core Magento tasks that Grunt will execute.

We’ll go ahead and create that local-themes file. Let’s do that by copying the themes.js file in this directory over to local-themes.js. This safesguards any changes we make, so they don’t get overridden by core updates.

You’ll also want to create the specific configuration relating to your custom theme. Here is the sample code for the Juno theme:

dev/tools/grunt/configs/local-themes.js

"use strict"; module.exports = {
  blank: {
    area: 'frontend',
    name: 'Magento/blank',
    locale: 'en_US',
    files: [ 'css/styles-m', 'css/styles-l', 'css/email', 'css/email-inline' ],
    dsl: 'less'
  },
  luma: {
    area: 'frontend',
    name: 'Magento/luma',
    locale: 'en_US',
    files: [ 'css/styles-m', 'css/styles-l' ],
    dsl: 'less'
  },
  backend: {
    area: 'adminhtml',
    name: 'Magento/backend',
    locale: 'en_US',
    files: [ 'css/styles-old', 'css/styles' ],
    dsl: 'less'
  },
  juno: {
    area: 'frontend',
    name: 'Macademy/juno',
    locale: 'en_US',
    files: [ 'css/styles-m', 'css/styles-l' ],
    dsl: 'less'
  }
}

Grunt comes with a few commands, so lets next learn what they are and how they work.