Skip to content

Instantly share code, notes, and snippets.

@kayintveen
Created January 26, 2016 10:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kayintveen/432a428f1b1a54c578d7 to your computer and use it in GitHub Desktop.
Save kayintveen/432a428f1b1a54c578d7 to your computer and use it in GitHub Desktop.
Gulp with Livereload for Magento2, the only reason i wanted to use this is due to the speed of the current grunt way, i actually still use grunt for several tasks, but just the watching and generating of css files i think Gulp is the way to go. only downside is that you need to add your less files by hand. http://www.microdesign.nl
// Gulpfile for Magento 2 with livereload
// Author: Kay in 't Veen - Microdesign.nl
//
//
// 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/<filename>.less',
'app/design/frontend/<vendor>/<theme>/web/css/<filename2>.less'])
.pipe(less())
.pipe( sourcemaps.write() )
.pipe( livereload() )
.pipe(gulp.dest('pub/static/frontend/<vendor>/<theme>/nl_NL/css'));
});
// Watch Files For Changes and livereload
gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/design/frontend/<vendor>/<theme>/web/**/*.less', ['less']);
});
gulp.task('default', ['less', 'watch']);
@robhuijben
Copy link

One problem with using Gulp in Magento 2 to compile is the fallback system. Any idea how to include files like /source/lib/_variables.less?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment