自定义laravel elixir livereload

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

恐怕还没有办法将livereload与长生不老药一起使用。我建议你使用灵丹妙药，并开始使用所有自由通用的gulp插件。

我用Livereload进行实时重新加载的秘诀：

1. 安装用于Chrome的Livereload插件，并在Chrome的toolbar
2. Install gulp
3. 中启用它的按钮：

npm安装gulp gulp管道工gulp connect gulp sass --save-dev

• Create简单的gulp文件(只加载*.scss文件)，如下所示。

• 运行gulp

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

首先使用以下命令安装一个名为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 3

如果您使用的是Elixir 3.3和Homestand，则可以使用browsersync()而无需安装任何内容

首先运行：$ php artisan serve --host=0

在您的代理上:mix.browserSync({ gulpfile.js：'localhost:8000'})；