Lightning Fast Assets Reloading with LiveReload

Imagine you are editing an CSS/LESS/Sass/JavaScript/Image/.. file in your Laravel application. You have your app open in a few web browsers for testing: Chrome on the main display, IE11 VM on the second monitor, and your iPhone and iPad on the desk. As soon as you hit “save” in your editor, your CSS/LESS/JavaScript changes are compiled, and pushed out to all these browsers. Instantly. The browsers don’t even reload the page; the new styles simply pop in.

Prerequisites

Install LiveReload extension in your Web browser

Installation

1. Install gulp and gulp-livereload Node.js modules:

   1. Open a terminal inside the root of your Laravel application directory

   2. Run the following command:

      npm install --save-dev gulp gulp-livereload

2. In the root of your Laravel 5.* application directory, Append to the gulpfile.js file this content:

//...

/*
 |--------------------------------------------------------------------------
 | Assets Reloading with LiveReload
 |--------------------------------------------------------------------------
 |
 | Installation:
 |   npm install --global gulp
 |   npm install --save-dev gulp-livereload && npm install
 |
 | Usage:
 |   gulp livereload
 */

var gulp = require('gulp');
var livereload = require('gulp-livereload');

var host = 'http://localhost';
var port = 3000;
var assetPrefix = '/assets';
var larassetUrl = host + (port ? ':' + port : '') + assetPrefix;

gulp.task('livereload', function() {
  livereload({start: true});

  var livereloadPage = function() {
    // Reload the whole page
    livereload.reload();
  };

  gulp.watch('resources/views/**/*.blade.php', livereloadPage);
  gulp.watch('resources/lang/**/*.php', livereloadPage);

  // Static files
  gulp.watch('public/**/*.+(css|js|html|gif|ico|jpg|jpeg|png)', function(event) {
    var filePath = event.path.replace(/\\/g, '/').replace(new RegExp('^(.*/)?public(/(.+))$'), '$2');
    livereload.changed(filePath);
  });

  // Images files in assets paths
  gulp.watch('{{resources,lib,provider},{vendor,workbench}/*/*/{resources,lib,provider}}/assets/images/**/*.+(gif|ico|jpg|jpeg|png)', function(event) {
    var filePath = event.path.replace(/\\/g, '/').replace(new RegExp('^(.*)?' + assetPrefix + '/images(/(.+))$'), '$2');
    livereload.changed(larassetUrl + filePath);
  });

  // JavaScript files in assets paths
  gulp.watch('{{resources,lib,provider},{vendor,workbench}/*/*/{resources,lib,provider}}/assets/{js,javascripts}/**/*.+(js|coffee|es6|ts|ejs)', function(event) {
    var filePath = event.path.replace(/\\/g, '/');
    var pattern = new RegExp('resources/assets/(.+?)((\.js)?(\.(coffee|es6|ts))?)(\.ejs)?$');
    var m = filePath.match(pattern);
    if (m && m[1] && m[2]) {
      livereload.changed(larassetUrl + '/app.js');
    }
  });

  // StyleSheets files in assets paths
  gulp.watch('{{resources,lib,provider},{vendor,workbench}/*/*/{resources,lib,provider}}/assets/{css,stylesheets}/**/*.+(css|less|sass|scss|styl|ejs)', function(event) {
    var filePath = event.path.replace(/\\/g, '/');
    var pattern = new RegExp('resources/assets/(.+?)((\.css)?(\.(less|s[ac]ss|styl))?)(\.ejs)?$');
    var m = filePath.match(pattern);
    if (m && m[1] && m[2]) {
      livereload.changed(larassetUrl + '/app.css');
    }
  });
});

For Laravel 4.2 support, read the previous version of this page.

Usage

In your terminal, run the following command to start gulp’s livereload monitor:

gulp livereload

Credits

Lightning-Fast Sass Reloading in Rails 3.2