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

1. npm install --save-dev laravel-elixir-livereload (npm install if you haven’t installed elixir yet from a fresh install of Laravel)
2. php artisan serve (or use homestead)
3. call mix.livereload(); in your gulpfile.js. Something like this:

   var elixir = require('laravel-elixir');
   require('laravel-elixir-livereload');
    
   elixir(function (mix) {
       mix.livereload();
   });

4. gulp watch
5. Visit your dev server in your browser and enable the LiveReload extension. Instructions here if you don’t have it installed.
6. 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 the box. Just do

mix.browserSync();

and the default settings of BrowserSync will work! Check out this laracasts video for a demo.

End Update October 7, 2015

Browsersync is an awesome open source tool that has a great set of features on top of just refreshing your browser upon saving your code. Features like syncing scroll position, syncing clicks, syncing form inputs across all open browsers might prove useful in testing multiple browsers.

In order to make it work with Laravel, we will make use of another wrapper around browsersync for Laravel Elixir.

1. npm install laravel-elixir-browser-sync --save-dev (npm install if you haven’t installed elixir yet from a fresh install of Laravel)
2. php artisan serve --host 0.0.0.0. For some reason, the default localhost:8000 doesn’t seem to work.
3. Add the following to your gulpfile.js:

   var elixir = require('laravel-elixir');
   require('laravel-elixir-browser-sync');
   
   elixir(function(mix) {
       mix.sass('app.scss');
       mix.browserSync([
           'app/**/*',
           'public/**/*',
           'resources/views/**/*'
         ], {
           proxy: '0.0.0.0:8000',
         });
   
   });

   Make sure the proxy is set to the IP address you set in step 2.
4. gulp watch
5. Your browser will open the proxy address and is now using browsersync to watch for changes. For the sync options browsersync has to offer. Go to http://localhost:3001
6. For any extra options you want to specify, have a look at the documentation here. Just add any of the options to the gulpfile like so:

   elixir(function(mix) {
       mix.sass('app.scss');
       mix.browserSync([
           'app/**/*',
           'public/**/*',
           'resources/views/**/*'
         ], {
           proxy: '0.0.0.0:8000',
           port: 5000,
           ui: {
               port: 8080
           },
         });
   
   });

   
   

Painless Builds With Elixir: Browsersync in Action - https://laracasts.com/series/painless-builds-with-laravel-elixir/episodes/13

from : http://andremadarang.com/livereload-and-browsersync-with-laravel/