gistfile1.js

// I tried to create a shared less task that can be run between the live-reload task and the browser-sync task
// It kind of work (not) but the browser reload and reconnect all of the time 

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var csswring = require('csswring');
var livereload = require('gulp-livereload');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/', './css/overrides/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
});

gulp.task('lrl',['less'], function(){
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(livereload());
});


gulp.task('watch', ['lrl'], function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['lrl']);  // Watch all the .less files, then run the less task
});


// browser-sync setup
gulp.task('bs',['less'], function(){
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(reload({stream: true}))
});

gulp.task('serve', function() {
    browserSync.init({
        proxy: "http://leadgen.dev/node/1272"
    });
    gulp.watch("./css/*.less", ['less']);
    gulp.watch("./js/script.js").on('change', reload);
    gulp.watch("./templates/*.php").on('change', reload);
});

// run default task with live reload for local development
gulp.task('default', ['watch']); // Default will run the 'entry' watch task
// gulp.task('default', ['serve']); // Default will run the 'entry' watch task



// The only way  I managed to make this work is by either duplicate the less compilation code
var gulp         = require('gulp'),
    less         = require('gulp-less'),
    watch        = require('gulp-watch'),
    plumber      = require('gulp-plumber'),
    path         = require('path'),
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer-core'),
    mqpacker     = require('css-mqpacker'),
    csswring     = require('csswring'),
    livereload   = require('gulp-livereload'),
    browserSync  = require('browser-sync').create(),
    reload       = browserSync.reload;


gulp.task('less-lrl', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    mqpacker,
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/'],
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['less-lrl']);  // Watch all the .less files, then run the less task
});


gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    mqpacker,
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(reload({stream: true}))
});
gulp.task('serve', ['less'], function() {

  browserSync.init({
    proxy: "http://leadgen.dev/node/1272"
  });

  gulp.watch("./css/*.less", ['less']);
});

gulp.task('default', ['watch']); // Default will run the 'entry' watch task







// or run the live reload and browser-sync task concurrently 
var gulp         = require('gulp'),
    less         = require('gulp-less'),
    watch        = require('gulp-watch'),
    plumber      = require('gulp-plumber'),
    path         = require('path'),
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer-core'),
    csswring     = require('csswring'),
    livereload   = require('gulp-livereload'),
    browserSync  = require('browser-sync').create(),
    reload       = browserSync.reload;


gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];

  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});


gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['less']);  // Watch all the .less files, then run the less task
});

gulp.task('serve', function() {
    browserSync.init({
      files: ['**/*.js', '**/*.php','**/*.css'],
      proxy: "http://leadgen.dev/node/1272"
    });
});

// run default task with live reload for local development
gulp.task('default', ['less', 'watch', 'serve']); // Default will run the 'entry' watch task