5

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

1
  • Was my response the one you where looking for? Feb 10 '17 at 14:20
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 '17 at 13:22
  • What do you mean? Mar 26 '17 at 17:51
  • Sorry I meant what about for JS files? This is really good BTW Apr 2 '17 at 9:29
  • How to get output using this code? Aug 11 '18 at 6:45
  • Do you know how to create critical.css using gulp or grunt? Apr 6 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 '17 at 14:10
  • @BenCrook just use version 0.11.4 and lower
    – Lorenzo
    Jun 1 '17 at 14:22
  • 1
    That means missing out on new features and bug fixes, not an ideal solution.
    – Ben Crook
    Jun 1 '17 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 '17 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, privacy policy and cookie policy

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