Although Magento 2 introduces built-in Grunt tasks, there are still several steps that have to be passed in order to set up Grunt for Magento 2 and the Pearl Theme.
First make sure that you set your Magento application to developer mode.
Note: You might need to run the installation commands below with root privileges, using sudo in front of each command. If the commands fail, please try rerunning them with sudo if needed.
Install Node JS on your PC. Here's a example:
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
For other Node JS versions check out this link: https://github.com/nodesource/distributions#debinstall
Install the Grunt CLI globally. To do this, run the following command in a command prompt:
npm install -g grunt-cli
Navigate to the root of your Magento Project and edit the names of the Grunt-related files as follows:
Install (or refresh) the
node.js project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt, from the root of the Magento project:
Check to make sure Grunt is installed correctly. If it is, running the following command should return your installed version:
grunt-config.json file, and replace the following:
Add your theme to the Grunt configuration. To do this, head into the
dev/tools/grunt/configs/themes.js file, add your theme to
module.exports as follows:
'<path_to_file1>', //path to root source file
For example, to add the Pearl Child Theme, open the
dev/tools/grunt/configs/themes.js file and add pearl as follows:
Start working with Grunt on customizing the Pearl Theme. To start, you can run the following Grunt commands. You can run them all in one line as exemplified here:
If you have the Pearl Theme configured, run the following:
grunt clean:pearl && grunt exec:pearl && grunt less:pearl && grunt watch:pearl
If you have the deafult Magento 2 Luma theme configured, run the following:
grunt clean:luma && grunt exec:luma && grunt less:luma && grunt watch:luma
Step 9 (Optional):
If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, you can install the LiveReload Chrome Extension in your browser and start it by clicking the extension icon after Grunt watching is enabled.
You can find more details about what each Grunt command does below. Make sure you run the commands from your Magento installation directory.
Removes the theme related static files in the pub/static and var directories.
Republishes symlinks to the source files to the pub/static/frontend/// directory.
Compiles .css files using the symlinks published in the pub/static/frontend/// directory.
Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser.
If you have LiveReload installed, run the grunt watch command, and the flow is simple:
- After you customize the content of any .less file, changes are applied and the page should reload automatically. No additional action should be required.
- After you customize the root source files or move the files included to the root files, run the grunt clean and grunt exec commands, and the page should reload in the browser.
To stop the Grunt watcher, you can use CTRL+C, which closes the process on Linux environments.