如何在 Laravel 中使用 elixir 的 browserSync()答案

【问题标题】：How to use browserSync() of elixir in Laravel如何在 Laravel 中使用 elixir 的 browserSync()
【发布时间】：2016-07-31 16:01:04
【问题描述】：

我正在使用 Laravel 的 elixir() 5.2，这是gulpfile.js：

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

elixir(function(mix) {
    mix.compass(['app.scss', 'controllers.scss']).version('css/app.css');
    mix.scripts(['jquery.js','app.js']).version('js/all.js');
});

我想将browserSync() 添加到gulpfile.js，
我应该把它放在哪里？

elixir(function(mix) {
    mix.browserSync({ 
       proxy: 'project.app'
    });
});

【问题讨论】：

标签： php laravel laravel-5.2 laravel-elixir

【解决方案1】：

我应该把它放在哪里？

它可能在你 gulpfile.js 中的任何地方

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

elixir(function(mix) {
    mix.compass(['app.scss', 'controllers.scss']).version('css/app.css');
    mix.scripts(['jquery.js','app.js']).version('js/all.js');
    mix.browserSync({ 
       proxy: 'project.app'
    });
});

然后，运行gulp watch 并观察您的浏览器同步您在http://project.app:3000 中更改的前端文件

【讨论】：

【解决方案2】：

我通过以下步骤让它在我的新 laravel 5.2 项目上运行：

npm 安装
npm install laravel-elixir-browser-sync --save-dev

将 gulpfile.js 改为读取

var elixir = require('laravel-elixir');
elixir(function(mix) {
    mix.sass('app.scss');
    mix.browserSync({
        proxy: 'app.local',
        files: [
            'app/**/*',
            'public/**/*',
            'resources/**/*'
        ]
    });
});

运行“gulp watch”

【讨论】：