Настроить Laravel Elixir LiveRload

Question

Мне нужно выполнить после того, как mix.less ('app.less') автоматически перезагрузит страницу. Что бы не нажимать каждый раз 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');
});

Можно ли использовать его как синхронизацию браузера?

Answer 1

Вы можете использовать browsersync() без установки чего-либо, если у вас есть Elixir 3.3 и Homestand

Выполните сначала: $ php artisan serve --host=0

На вашем gulpfile.js: mix.browserSync({прокси: 'localhost:8000'});

Answer 2

Боюсь, пока нет возможности использовать livereload с эликсиром. Я предлагаю вам полностью использовать эликсир и начать использовать всю свободу общих универсальных плагинов gulp.

Мой рецепт для живой перезагрузки с Livereload:

1. Установите плагин Livereload для Chrome
2. Включите его, нажав кнопку на панели инструментов Chrome

3. Установите gulp-модули:

   npm установить gulp gulp-сантехник gulp-connect gulp-sass --save-dev

4. Создайте простой gulpfile (с livereload только для файлов *.scss), как показано ниже.

5. бежать глотком

Пример 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 3

Сначала установите плагин с именем laravel-elixir-livereload с помощью

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

После этого в вашем gulpfile.js напишите это:

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

require('laravel-elixir-livereload');


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

Наконец запустить

gulp watch

Документация https://www.npmjs.com/package/laravel-elixir-livereload

Answer 4

Вы можете использовать плагин laravel-elixir-browsersync-official.

Ваш gulpfile.js должен выглядеть так:

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