laravel - 自定义 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');
});

是否可以将其用作 gulp browser-sync ？

Answer 1

你可以使用 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'
        })
});

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

恐怕还没有办法将 livereload 与 elixir 一起使用。我建议你完全使用 elixir 并开始使用通用通用 gulp 插件的所有自由。

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

1. 为 Chrome 安装 Livereload 插件
2. 按 Chrome 工具栏中的按钮启用它

3. 安装 gulp 模块：

   npm install gulp gulp-plumber gulp-connect gulp-sass --save-dev

4. 创建简单的 gulpfile（仅限 *.scss 文件的 livereload），如下所示。

5. 运行 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 4

如果你有 Elixir 3.3 和 Homestand，你可以在不安装任何东西的情况下使用 browsersync()

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

在你的 gulpfile.js 上： mix.browserSync({proxy: 'localhost:8000'});