❗ Note

Start the console from the administrator

Compile LESS with Grunt

Installing and configuring Grunt

1. Install node.js to any location on your machine.
2. Install Grunt CLI tool globally and locally. To do this, run the following command in a command prompt: npm install -g grunt-cli, npm install grunt --save-dev
3. 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:

cd <your_Magento_instance_directory>
npm install
npm update

4. Add your theme to Grunt configuration. To do this, in the dev/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: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    ...
    },

5. (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:

• grunt clean:<theme> – Removes the theme related static files in the pub/static and var directories.
• grunt exec:<theme> – Republishes symlinks to the source files to the pub/static/frontend/<Vendor>/<theme>/<locale> directory.
• grunt less:<theme> – Compiles .css files using the symlinks published in the pub/static/frontend/<Vendor>/<theme>/<locale> directory
• grunt watch – Tracks the changes in the source files, recompiles .css files

Compile LESS with Gulp

Сomparison table Gulp vs Grunt

	Gulp	Grunt
Compilation of all themes (10 files):	16sec	33sec
Custom theme compilation (2 files)	4.5s	11.2s

Installation

1. Download as a zip file or clone this.
2. Copy gulpfile.js and package.json in to the root directory
3. Install gulp globaly and locally using npm install -g gulp-cli, npm install gulp --save-dev
4. Install modules: run a command in a root directory of your project npm install.
5. Compilation: gulp less --<theme> --live (with live reload)
6. Watcher: gulp watch --<theme> --live (with live reload)
7. For using liveReload install extension for your browser

❗ Note

Don't remove grunt modules (You must use grunt exec:<theme> command for republishes symlinks to the source files)

Links:

• Create custom theme
• Java Script

Resources:

• Compile LESS with Grunt
• Compile LESS with Gulp