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

Very useful

This is frickin cool, thanks for sharing!

I can’t make it work. Script prints out "…reloaded", however, actually, page remains unrefreshed in the browser.

[15:57:30] app.css reloaded.
[15:57:30] Finished 'watch-lr-css' after 583 ?s

@zhekaus, did you activated Live Reload on browser?

I do have the extension of LiveReload on, but still I do not recharge when the file changes

Same here, not working
running gulp watch refreshing the page and making sure that the websocket connection is established
but the page does not reload.. and if I console inside the gulp.task('watch-lr') it doesn't console anything when I change the files mentioned in elixir.json

Not working for me nether.

I'll take a look at it, perhaps elixir has changed.

Works like a charm for me with a fresh Laravel install.
Thanks.

you could share with us how you have set? and the server you use, for example. php artisan serve, vagrant or a local LAMP server? to see that I am failing

With Elixir v2 this was working,
with v3 it only watches but doesn't livereload anymore.

great, thanks for this!

Can confirm this does not work on elixir "^3.0.0". I had two projects running the same setup but with different Elixir versions and it did not work on "^3.0.0".

Would love to know if anyone finds a solution to this.

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!