Skip to content

Instantly share code, notes, and snippets.

@civ2boss
Last active August 29, 2015 14:19
Show Gist options
  • Save civ2boss/c4d4704d60896944a704 to your computer and use it in GitHub Desktop.
Save civ2boss/c4d4704d60896944a704 to your computer and use it in GitHub Desktop.
Gulp LESS compiler & live reload watcher
var gulp = require('gulp'); // Gulp itself
var less = require('gulp-less'); // Compiling LESS
var watch = require('gulp-watch'); // Watch for files that changed
var filter = require('gulp-filter'); // Filters the pipeline
var plumber = require('gulp-plumber'); // Handles errors without breaking pipeline
var minifyCss = require('gulp-minify-css'); // Minify CSS
var sourcemaps = require('gulp-sourcemaps'); // Generates source maps
var autoprefixer = require('gulp-autoprefixer'); // Post process CSS
var browserSync = require('browser-sync').create(); // Live reload server
// Paths to LESS files and destination for CSS
// [Note: we are bypassing LESS files prepended with
// an underscore which are files that we only import
// to other LESS files]
var paths = {
less: ['public/less/*.less','!public/less/_*.less'],
dest: ['public/stylesheets']
};
// By default 'gulp' would run this task
gulp.task('default', ['less']);
// This task 'gulp less' will compile all LESS files from the
// LESS directory
gulp.task('less', function(done) {
return gulp.src(paths.less)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(less({
paths: ['.']
}))
.pipe(minifyCss())
.pipe(autoprefixer({ cascade: false }))
.pipe(sourcemaps.write('source', {includeContent: true}))
.pipe(gulp.dest(paths.dest[0]))
.on('end', done);
});
// This task 'gulp watch' will start a server, opens in the browser, and
// compile LESS files as they are changed
gulp.task('watch', function() {
browserSync.init({
// Please change this proxy to the file path you use for local dev
proxy: "<YOUR LOCAL DEV PATH>"
});
return gulp.src(paths.less)
.pipe(watch(paths.less, {verbose: true}))
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(less({
paths: ['.']
}))
.pipe(minifyCss())
.pipe(autoprefixer({ cascade: false }))
.pipe(sourcemaps.write('source', {includeContent: true}))
.pipe(gulp.dest(paths.dest[0]))
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream: true}));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment