Proper way to use LiveReload with Laravel Elixir

That's cool but did you know that you can extend elixir's tasks like the docs say?

Yes @Ruffles , but it doesn't work as needed in this case, so we need a little sorcery.

Or use browser-sync.

Just ran npm install gulp-livereload, edited my gulpfile.js to contain your code:

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 Less
 | file for our application, as well as publishing vendor resources.
 |
 */


elixir(function(mix) {
    mix.sass("template-assets/templates.scss");
});

elixir(function(mix) {
    mix.scripts([
        "bower_components/modernizr/modernizr.js",
        "bower_components/jquery/dist/jquery.js",
        "plugins.js",
        "main.js"
    ]);
});




/**
 * 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('templates.css');
});
gulp.task('watch-lr', function () {
    // notify any other changes, so that livereload can refresh the page
    livereload.changed('all.js');
});

And added elixir.json to the root.

However my browser could not connect to a livereload server... do I have to enable livereload as a server somewhere? Thanks in advance. :-)

@adammench did you activate the Livereload chrome extension? Run gulp and then try activating it.

this works for me very well

content of livereload-task.js next to gulpfile.js

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var config = elixir.config;
var livereload = require('gulp-livereload');

elixir.extend('livereload', function(src, output) {
    gulp.task('livereload', function() {
        livereload.listen();
        gulp.on('stop', function() {
            livereload.changed('localhost');
        });
    });
    this.registerWatcher('livereload');
    return this.queueTask('livereload');
});

content of gulpfile.js

var elixir = require('laravel-elixir');
require('./livereload-task');

/*
 |--------------------------------------------------------------------------
 | 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 Less
 | file for our application, as well as publishing vendor resources.
 |
 */
elixir(function(mix) {
    mix.less("app.less")
        .livereload();
});

don't forget to add gulp-livereload as dependency npm install gulp-livereload --save-dev

run gulp watch in terminal and open your file in chrome and activate LiveReload Extention

Hello,

Somebody has used laravel-elixir-livereload ?

@g0b how can i get it to listen for changes in .blade.php and .js files as well? That would be awesome!

And @egarcia i have tried https://github.com/ehlovader/laravel-elixir-livereload and my experience is that it gets the terminal quite messy and that it breaks very often. If I could get @g0b solution to work with all files that would be a good choice.

@RavanScafi I think your way is very nice, I like it. It still stays clean in the terminal. I would love to have feedback in the terminal for what files that have changed though. That would be great in my opinion. Nice and simple gist, also easy to follow.

@blomdahldaniel you can use this updated livereload-task.js

'use strict';

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var gutil = require('gulp-util');
var livereload = require('gulp-livereload');

elixir.extend('livereload', function(files) {
    files = files || [];

    if (onWatchTask()) {
        livereload.listen();
        if(files.length > 0) {
            gulp.watch(files).on('change', livereload.changed);
        }
        gulp.on('stop', function() {
            livereload.changed('localhost');
        });
    }

    return this;
});

function onWatchTask() {
    return gutil.env._[0] == 'watch';
}

now, there is an option to define files to watch. to use this updated task you have also to install gulp-util with npm install gulp-util --save-dev

recently i switched over to browser-sync, because i need also a local server for my teammates.

Hi all. laravel-elixir-livereload developer here.

Sorry you found it cluttered terminal @blomdahldaniel it certainly isn't perfect. I was just updating it for Elixir 3.x and wanted to clean up the issues which were already posted on my extension.

Just so happened to stumble on this conversation while researching good ways to find out if the task being run was 'watch' or not.

I'm using the laravel-elixir-livereload plugin and it's working great here. All I did was installing the plugin:

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

Added .livereload() to my elixir function:

elixir(function(mix) {
    mix.sass('app.scss').livereload();
});

Added the livereload script tag as described on the plugins website

I've followed the steps and advice above for months... many of the packages added an additional delay to Elixir's already slow compile times.

Admittedly, the total delay is still less than 1.5 seconds, but being that my primary role is a front-end developer, this drove me nuts after 6+ months of Elixir use.

So call me neurotic, but I made Fannypack, aka "the toolbelt for front-end developers" lol. I'm not claiming that Fannypack is better than Elixir, but it solves everything I found annoying about it. I'm hoping that others might also find it useful.

It's literally brand spankin' new, so it doesn't have all the functionality that Elixir community's provided, but if you all would be nice enough to check it out, I'd be happy to fill in any missing tasks.

Thanks!

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