如何在Laravel中使用Elixir的browserSync（）

Question

我正在使用Laravel 5.2 elixir（），这是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'
    });
});

Answer 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中更改的前端文件

Answer 2

我通过以下步骤在新的laravel 5.2项目上工作：

1. npm安装
2. npm install laravel-elixir-browser-sync --save-dev

3. 更改gulpfile.js以读取

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

4. 运行“ gulp watch”