LiveReload and Browsersync with Laravel

Andre Madarang has written a nice tutorial about how to use LiveReload and Browsersync with Laravel

I tend to use LiveReload a lot for any heavy front end development that requires spamming of the F5 key for every change I make in my code. If I’m only doing front end work, I just make use of the npm gulp-livereload package and call it a day. However, if I’m working with Laravel, there are a few options that are available to enable LiveReload play nicely with Laravel Elixir.

Elixir Wrapper for LiveReload

npm install --save-dev laravel-elixir-livereload 

(npm install if you haven’t installed elixir yet from a fresh install of Laravel)

php artisan serve

(or use homestead)

call mix.livereload(); in your gulpfile.js. Something like this:

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

elixir(function (mix) {
    mix.livereload();
});
gulp watch

Visit your dev server in your browser and enable the LiveReload extension. Instructions here if you don’t have it installed.

Make a change in your code and listen to your F5 key breathe a sigh of relief.

LiveReload will watch for changes in your php, html (views), css, and js and automagically refresh your browser for you. It pairs nicely with elixir if you wanted to do any other frontend tasks. For example, if you wanted to compile SASS first, just add mix.sass('app.scss'); before you call mix.livereload() and voila.

Browsersync

Update October 7, 2015: As of Laravel Elixir version 3.3, Browsersync comes packaged straight out of