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');
});

The thing is that when i manually change the app.css it successfully work, but when it's changed bu gulp task nothing happen.

I ended up with the following which worked for me.

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

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss')
    mix.task('livereload', 'public/css/app.css');
});

gulp.on('task_start', function (e) {
  // only start LiveReload server if task is 'watch'
  if (e.task === 'watch') {
    livereload.listen();
  }
});

gulp.task("livereload", function() {
  livereload.changed('app.css');
});

Just in case it wasn't noticed Elixir now comes with a watch task implemented using BrowserSync, and you can set a proxy to the URL and just access it through port 3000 so http://domain.dev:3000 by running gulp watch and adding the mixin below to gulp.js:

mix.browserSync({
    proxy: 'domain.dev'
});

I'm trying to perform this setting in my Laravel 5.3 and Laravel-elixir ":" ^ 6.0.0-9 ", however I do not get it so far. Does anyone know if there have been any changes due to the versions?

Amazing thank you so much!