How to configure Magento2 with Gulp instead Grunt. Anyone have idea ?

  • Was my response the one you where looking for? – Kay Int Veen Feb 10 '17 at 14:20

I personally use this simple gulpfile.js to process my css to the pub folders.

// Load gulp and plug-ins
var gulp    = require('gulp'),
    jshint      = require('gulp-jshint'),
    less        = require('gulp-less'),
    concat      = require('gulp-concat'),
    uglify      = require('gulp-uglify'),
    rename      = require('gulp-rename'),
    gutil       = require('gulp-util'),
    livereload  = require('gulp-livereload'),
    sourcemaps  = require('gulp-sourcemaps');

// Generate less to CSS.
gulp.task('less', function() {
    return gulp.src(['app/design/frontend/Vendor/theme/web/css/theme.less'])
        .pipe( sourcemaps.write() )
        .pipe( livereload() )

// Watch Files For Changes and livereload
gulp.task('watch', function() {
    gulp.watch('app/design/frontend/Vendor/theme/web/css/**/*.less', ['less']);

gulp.task('default', ['less']);
  • What about for languages though? – TheBlackBenzKid Mar 26 '17 at 13:22
  • What do you mean? – Kay Int Veen Mar 26 '17 at 17:51
  • Sorry I meant what about for JS files? This is really good BTW – TheBlackBenzKid Apr 2 '17 at 9:29
  • How to get output using this code? – Pratik Mehta Aug 11 '18 at 6:45

I suggest to try SnowdogApps/magento2-frontools

With this you have gulp and also sass support

  • This is no longer the case, Frontools only supports Sass now – Ben Crook Jun 1 '17 at 14:10
  • @BenCrook just use version 0.11.4 and lower – Lorenzo Jun 1 '17 at 14:22
  • That means missing out on new features and bug fixes, not an ideal solution. – Ben Crook Jun 1 '17 at 15:46

there is an ongoing discussion in including gulp to magento2 here: https://github.com/magento/magento2/issues/2104

alen kent also wrote a blog post on how to integrate it in the current release: http://alankent.me/2016/01/27/gulp-et-al-in-magento-2/

I think the process will be still much enhanced for fe developers since many parts of the frontend workflow are pretty hard to change currently. I hope and think magento2 will be more flexibel with this in the future like it is in most cases for the backend development.

  • That links are very informative. Thanks for sharing boss ! – Shahzaib Hayat Khan Nov 1 '17 at 13:33

some step :

  • apt-get install nodejs and tape ln -s /usr/bin/nodejs /usr/bin/node
  • go to root prject and : apt-get install npm
  • npm install --global gulp-cli and tape npm install --save-dev gulp
  • donwload gulp.js from https://github.com/poddubny/magento2-gulp => npm install gulp-less npm install gulp-sourcemaps npm install gulp-cssmin npm install gulp-livereload npm install gulp-if npm install -g graceful-fs
  • bin/magento dev:source-theme:deploy --locale="en_US" --area="frontend" --theme="Ibnab/Salam"
  • php bin/magento setup:static-content:deploy

the complete video tutorials is here : http://www.ibnab.com/en/blog/magento-2/magento-2-video-introduction-for-using-gulp-in-frontend


If you are looking for something that stays with core magento style and structures, our team has developed this AbsoluteWebServices/magento-2-gulp that supports:

  • default magento 2 project structure with theme config inside dev/tools/grunt/configs/themes.js
  • installation with composer
  • .less
  • browsersync and liverreload
  • compiling es6+ with Babel
  • creating svg sprites

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.