Last active
August 29, 2015 14:19
-
-
Save civ2boss/c4d4704d60896944a704 to your computer and use it in GitHub Desktop.
Gulp LESS compiler & live reload watcher
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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