laravel使用browserSync实时刷新浏览器实例
1)安装laravel5.1框架
2)安装node.js
3)package.json文件中定义的所有依赖（ gulp 和 laravel-elixir ）。
{
"private":true,
"devDependencies":{
"gulp":"^3.8.8"//必须
},
"dependencies":{
"bootstrap-sass":"^3.0.0",
"laravel-elixir":"^4.0.0",//必须
"laravel-elixir-browsersync":"^0.1.5"//必须(注意版本)
}
}
4)项目根目录下运行命令: npm install
该命令会运行根目录下package.json 安装必要的扩展
5) gulpfile.js文件修改打包配置
var elixir              =require('laravel-elixir');
var gulp             =require('gulp');
var browserSync =require('browser-sync').create();
//监控文件修改,自动刷新 命令: gulp server(命令行执勤命令后直接挂起)
var config ={
                 name :'baseblue',
               version :'2.0.0',
               proxy :'http://www.laravel.dev',//项目域名
                  assetsDir :'resources/assets/',//对应项目根目录
                viewDir :'resources/views/'//对应项目根目录
}
               elixir.extend('server',function(){
                  gulp.task('server',function(){
                      browserSync.init({
                          proxy: config.proxy,//代理地址
                      notify:false,
                           open:true
});
//配置需要监控的文件
                     gulp.watch([
                        config.assetsDir+'**/*.js',
                     config.assetsDir+'**/*.css',
                            config.viewDir+'**/*.blade.php'
]).on("change", browserSync.reload);
});
});
//gulp命令执行区间
               elixir(function(mix){
//scss打包 命令:
//mix.sass('app.scss');
//less打包
//mix.less('app.less');
//js打包
/*mix.scripts([
                    'app.js', 'app2.js'
                 ]);*/
//打包好的文件创建版本
//模板页面载入版本号文件实例
//
//
//mix.version(['css/app.css', 'js/all.js']);
//监控文件修改,自动刷新
                   mix.server();
});