Customize laravel elixir livereload - laravel

Question

I need to perform after mix.less ('app.less') automatically reloads the page. What would not press each time F5
gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| 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');
mix.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch');
});
Is it possible to use it as a gulp browser-sync ?

Answer 1

I’m afraid there is no way to use livereload with elixir yet.
I suggest you to quite using elixir and start using all the freedom of general versatile gulp plugins.
My recipe for live reload with Livereload:
Install Livereload plugin for Chrome
Enable it pressing its button in Chrome’s toolbar
Install gulp-modules:
npm install gulp gulp-plumber gulp-connect gulp-sass --save-dev
Create simple gulpfile (with livereload of *.scss files only) like
below.
run gulp
Example of gulpfile.js
'use strict';
var
gulp = require('gulp'),
plumber = require('gulp-plumber'),
connect = require('gulp-connect'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('public/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch(['resources/assets/sass/*.scss'],
function (e) {
gulp.src(e.path)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'))
;
}
);
gulp.watch(['public/css/*.css',],
function (e) {
gulp.src(e.path)
.pipe(connect.reload())
;
}
);
});
gulp.task('server', ['watch'], function () {
connect.server({
root: 'public',
livereload: true
});
});
gulp.task('default', ['server']);

Answer 2

First install a plugin called laravel-elixir-livereload with
npm install --save-dev laravel-elixir-livereload
After that in your gulpfile.js write this:
var elixir = require('laravel-elixir');
require('laravel-elixir-livereload');
elixir( function(mix) {
mix.less('app.less')
.livereload();
});
Finally run
gulp watch
Documentation https://www.npmjs.com/package/laravel-elixir-livereload

Answer 3

You can use browsersync() without installing anything if you have Elixir 3.3 and Homestand
Run first: $ php artisan serve --host=0
On your gulpfile.js: mix.browserSync({proxy: 'localhost:8000'});

Answer 4

You can use the laravel-elixir-browsersync-official plugin.
Your gulpfile.js should look like this:
const elixir = require('laravel-elixir');
elixir((mix) => {
mix.less('app.less')
.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch')
.browserSync({
proxy: 'your-project.url'
})
});