Skip to content
Gulp for Magento 2
Branch: master
Clone or download
subodha Merge pull request #6 from subodha/revert-5-master
Revert "Support for windows for clean task"
Latest commit 9cb4372 Mar 1, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Revert "Support for windows for clean task" Mar 1, 2018
LICENSE Revert "Support for windows for clean task" Mar 1, 2018
_config.yml Revert "Support for windows for clean task" Mar 1, 2018
gulpfile.js Revert "Support for windows for clean task" Mar 1, 2018


Gulp for Magento 2

As a Magento 2 frontend developer you might have noticed that less to css compilation process is slow with grunt and it takes more time to rebuild everything making you an inefficient developer.

However, you could solve this problem with Gulp. Gulp is a task / build runner which uses Node.js for web development. The main difference between Gulp and Grunt lies in how they deal with their automation tasks inside.

Gulp uses Node Stream while Grunt uses temp files. Therefore, Gulp compilation is faster compared to Grunt.

Comparing with Grunt

Compilation of all themes (10 files):16sec33sec
Custom theme compilation (2 files)4.5s11.2s


  1. Download as a zip file or clone this in to ur pc.

  2. Copy "gulpfile.js" and "package.json" in to the root directory (codepool)

2.2 .If you are using Magento 2.2.2 or heigher height Un-comment line number 50 - 51in the gulpfile.js

  1. Install node.js for your OS:

  2. Install gulp globaly using npm install -g gulp-cli

  3. Install modules: run a command in a root directory of your project "npm install".
    (If you alrady instaled Grunt please remove node_module directory)

How to run

  1. Run : gulp exec --theme ex: gulp exec --luma
    Or: php bin\magento dev:source-theme:deploy --locale="en_AU" --area="frontend"

  2. Run : gulp deploy --theme ex: gulp deploy --luma
    Or: php bin\magento setup:static-content:deploy en_AU

  3. Run gulp command in the root directory with arguments or without. Examples:
    3.a. Compilation of all themes: gulp
    3.b. Compilation of certain theme: gulp less --luma
    3.c. Watcher of certain theme: gulp watch --luma
    3.d. Compilation of certain theme with minification (+~2.5s): gulp less --luma --min
    3.e. Compilation of certain theme with sourcemap(+~1.5s), can't be used with minification: gulp less --luma --map
    3.f. Compilation with live reload: gulp less --luma --live
    3.g. Watcher with liveReload: gulp watch --luma --live
    3.h. For clear the magento cache: gulp cache-flush

  4. For using liveReload install extension for your browser:
    4.a. Turn on the extension on the page of project.

You can’t perform that action at this time.