当前位置:Gxlcms > PHP教程 > laravelelixir如何实现实时预览

laravelelixir如何实现实时预览

时间:2021-07-01 10:21:17 帮助过:22人阅读

laravel5环境下,如何用elixir+browserSync实现php页面实时预览?

  1. <code>var gulp = require('gulp'),
  2. browserSync = require('browser-sync').create(),
  3. less = require('gulp-less');
  4. var elixir = require('laravel-elixir');
  5. //elixir.config.sourcemaps = false;
  6. var config = {
  7. name : 'baseblue',
  8. version : '2.0.0',
  9. proxy : 'localhost:8888',
  10. jsDir : 'public/js/',
  11. cssDir : 'public/css/',
  12. minDir : 'public/min',
  13. viewDir : 'resources/views/'
  14. }
  15. gulp.task('server', function() {
  16. browserSync.init({
  17. proxy: config.proxy,//代理地址
  18. notify: false,
  19. open: true
  20. });
  21. gulp.watch(['resources/assets/less/test.less'],['testless']);
  22. gulp.watch([
  23. config.viewDir+'**/*.blade.php',
  24. config.jsDir+'**/*.js',
  25. config.cssDir+'**/*.css'
  26. ]).on("change", browserSync.reload);
  27. });
  28. gulp.task('testless',function(){
  29. return elixir(function(mix) {
  30. mix.less('test.less');
  31. });
  32. });</code>

为什么elixir不能在gulp task的函数中使用?

回复内容:

laravel5环境下,如何用elixir+browserSync实现php页面实时预览?

  1. <code>var gulp = require('gulp'),
  2. browserSync = require('browser-sync').create(),
  3. less = require('gulp-less');
  4. var elixir = require('laravel-elixir');
  5. //elixir.config.sourcemaps = false;
  6. var config = {
  7. name : 'baseblue',
  8. version : '2.0.0',
  9. proxy : 'localhost:8888',
  10. jsDir : 'public/js/',
  11. cssDir : 'public/css/',
  12. minDir : 'public/min',
  13. viewDir : 'resources/views/'
  14. }
  15. gulp.task('server', function() {
  16. browserSync.init({
  17. proxy: config.proxy,//代理地址
  18. notify: false,
  19. open: true
  20. });
  21. gulp.watch(['resources/assets/less/test.less'],['testless']);
  22. gulp.watch([
  23. config.viewDir+'**/*.blade.php',
  24. config.jsDir+'**/*.js',
  25. config.cssDir+'**/*.css'
  26. ]).on("change", browserSync.reload);
  27. });
  28. gulp.task('testless',function(){
  29. return elixir(function(mix) {
  30. mix.less('test.less');
  31. });
  32. });</code>

为什么elixir不能在gulp task的函数中使用?

laravel自带browserSync

谢谢!终于实现了,根据elixir版本选择不同安装对应的laravel-elixir-browsersync插件。

人气教程排行