laravel使用browserSync实时刷新浏览器实例(已测试)

2018-06-28 后端 
  1. laravel使用browserSync实时刷新浏览器实例
  2. 1)安装laravel5.1框架
  3. 2)安装node.js
  4. 3)package.json文件中定义的所有依赖（ gulp 和 laravel-elixir ）。
  5. {
  6. "private":true,
  7. "devDependencies":{
  8. "gulp":"^3.8.8"//必须
  9. },
  10. "dependencies":{
  11. "bootstrap-sass":"^3.0.0",
  12. "laravel-elixir":"^4.0.0",//必须
  13. "laravel-elixir-browsersync":"^0.1.5"//必须(注意版本)
  14. }
  15. }
  17. 4)项目根目录下运行命令: npm install
  18. 该命令会运行根目录下package.json 安装必要的扩展
  20. 5) gulpfile.js文件修改打包配置
  21. var elixir 		=require('laravel-elixir');
  22. var gulp 		=require('gulp');
  23. var browserSync =require('browser-sync').create();
  25. //监控文件修改,自动刷新 命令: gulp server(命令行执勤命令后直接挂起)
  26. var config ={
  27. 		    name :'baseblue',
  28. 		    version :'2.0.0',
  29. 		    proxy :'http://www.laravel.dev',//项目域名
  30. 		    assetsDir :'resources/assets/',//对应项目根目录
  31. 		    viewDir :'resources/views/'//对应项目根目录
  32. }
  33. 		elixir.extend('server',function(){
  34. 		    gulp.task('server',function(){
  35. 		        browserSync.init({
  36. 		            proxy: config.proxy,//代理地址
  37. 		            notify:false,
  38. 		            open:true
  39. });
  41. //配置需要监控的文件
  42. 		        gulp.watch([
  43. 		            config.assetsDir+'**/*.js',
  44. 		            config.assetsDir+'**/*.css',
  45. 		            config.viewDir+'**/*.blade.php'
  46. ]).on("change", browserSync.reload);
  47. });
  48. });
  51. //gulp命令执行区间
  52. 		elixir(function(mix){
  53. //scss打包 命令:
  54. //mix.sass('app.scss');
  56. //less打包
  57. //mix.less('app.less');
  59. //js打包
  60. /*mix.scripts([
  61. 		        'app.js', 'app2.js'
  62. 		    ]);*/
  64. //打包好的文件创建版本
  65. //模板页面载入版本号文件实例
  66. //
  67. //
  68. //mix.version(['css/app.css', 'js/all.js']);
  70. //监控文件修改,自动刷新
  71. 		    mix.server();
  72. });