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