Proper way to use LiveReload with Laravel Elixir

_readme.md

Proper way to use LiveReload with Laravel Elixir

Features

• It works without touching laravel-elixir source files, so it will not break on updates.
• It runs only on watch task, so that when you run other tasks, livereload will not start and hang the console.
• It performs soft-reloads on CSS changes, instead of a full page reload.

Instructions

1. npm install gulp-livereload if you still don't have it.
2. Create an elixir.json file on the root of your project (where your gulpfile.js is located)
3. Update your gulpfile.js with the related code.
4. Run it with gulp watch.

Notes

• Watch only /public folder for CSS changes, or otherwise it will trigger a full page reload (because of .map files)
• Your watcher name on elixir.json must match a gulp task that will notify LiveReload.
• You can watch "app/**/*.php" too if you want.

elixir.json

{
  "watchers": {
    "default": {
      "watch-lr": [
        "public/**/*.js",
        "resources/views/**/*.php",
        "resources/lang/**/*.php"
      ],
      "watch-lr-css": [
        "public/**/*.css"
      ]
    }
  }
}

gulpfile.js

var gulp       = require('gulp');
var elixir     = require('laravel-elixir');
var livereload = require('gulp-livereload');


// your regular code goes here

// ...
// ...


/**
 * Logic for LiveReload to work properly on watch task.
 */
gulp.on('task_start', function (e) {
    // only start LiveReload server if task is 'watch'
    if (e.task === 'watch') {
        livereload.listen();
    }
});
gulp.task('watch-lr-css', function () {
    // notify a CSS change, so that livereload can update it without a page refresh
    livereload.changed('app.css');
});
gulp.task('watch-lr', function () {
    // notify any other changes, so that livereload can refresh the page
    livereload.changed('app.js');
});