5

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

1
  • Was my response the one you where looking for? Feb 10, 2017 at 14:20

6 Answers 6

3

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(less())
        .pipe( sourcemaps.write() )
        .pipe( livereload() )
        .pipe(gulp.dest('pub/static/frontend/Vendor/theme/nl_NL/css'))
        .pipe(gulp.dest('pub/static/frontend/Vendor/theme/de_DE/css'))
});


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


gulp.task('default', ['less']);
5
  • What about for languages though? Mar 26, 2017 at 13:22
  • What do you mean? Mar 26, 2017 at 17:51
  • Sorry I meant what about for JS files? This is really good BTW Apr 2, 2017 at 9:29
  • How to get output using this code? Aug 11, 2018 at 6:45
  • Do you know how to create critical.css using gulp or grunt? Apr 6, 2021 at 13:31
2

I suggest to try SnowdogApps/magento2-frontools

With this you have gulp and also sass support

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

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.

1
  • That links are very informative. Thanks for sharing boss ! Nov 1, 2017 at 13:33
1

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

2
0

I use this to compile LESS locally.

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

function styles_l() {
  return gulp.src('frontend/Magento/blank/web/css/styles-l.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write('/maps'))
    .pipe(gulp.dest('pub/static/frontend/Magento/blank/en_US/css'));
}

function styles_m() {
  return gulp.src('frontend/Magento/blank/web/css/styles-m.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write('/maps'))
    .pipe(gulp.dest('pub/static/frontend/Magento/blank/en_US/css'));
}

function watch() {
  gulp.watch('frontend/Magento/blank/web/css/**/*.less', styles_l);
}

var build = gulp.series(gulp.parallel(styles_l,styles_m));

exports.watch = watch;
exports.default = build;
0

If you are looking for something that stays with core magento style and structures, our team has developed this 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 and acknowledge you have read our privacy policy.

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