Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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.
// Gulpfile for Magento 2 with livereload
// Author: Kay in 't Veen -
// 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',
.pipe( sourcemaps.write() )
.pipe( livereload() )
// Watch Files For Changes and livereload
gulp.task('watch', function() {
livereload.listen();'app/design/frontend/<vendor>/<theme>/web/**/*.less', ['less']);
gulp.task('default', ['less', 'watch']);

This comment has been minimized.

Copy link

@robhuijben robhuijben commented Jun 7, 2016

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