Skip to content

Instantly share code, notes, and snippets.

@ravanscafi
Last active June 22, 2019 14:42
Show Gist options
  • Save ravanscafi/5928a99790b0b5466fde to your computer and use it in GitHub Desktop.
Save ravanscafi/5928a99790b0b5466fde to your computer and use it in GitHub Desktop.
Proper way to use LiveReload with Laravel Elixir

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.
{
"watchers": {
"default": {
"watch-lr": [
"public/**/*.js",
"resources/views/**/*.php",
"resources/lang/**/*.php"
],
"watch-lr-css": [
"public/**/*.css"
]
}
}
}
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');
});
@yhonguevara
Copy link

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

@jadjoubran
Copy link

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

@jrean
Copy link

jrean commented Aug 16, 2015

Not working for me nether.

@ravanscafi
Copy link
Author

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

@kinstrife
Copy link

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

@yhonguevara
Copy link

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

@jonasvanderhaegen
Copy link

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

@gthomas3
Copy link

great, thanks for this!

@harrynewsome
Copy link

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.

@unikapps
Copy link

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

@JamesDevware
Copy link

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

@mtpultz
Copy link

mtpultz commented Apr 25, 2016

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

@renatoschroepfer
Copy link

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?

@clarknelson
Copy link

Amazing thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment