欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

laravel elixir如何实现实时预览

程序员文章站 2022-06-10 12:27:23
...
laravel5环境下,如何用elixir+browserSync实现php页面实时预览?
var gulp             = require('gulp'),
     browserSync     = require('browser-sync').create(),
     less             = require('gulp-less');

var elixir             = require('laravel-elixir');
//elixir.config.sourcemaps = false;

var config = {
    name : 'baseblue',
    version : '2.0.0',
    proxy : 'localhost:8888',
    jsDir : 'public/js/',
    cssDir : 'public/css/',
    minDir : 'public/min',
    viewDir : 'resources/views/'
}
gulp.task('server', function() {
    browserSync.init({
        proxy: config.proxy,//代理地址
        notify: false,
        open: true
    });
    gulp.watch(['resources/assets/less/test.less'],['testless']);
    gulp.watch([
            config.viewDir+'**/*.blade.php',
            config.jsDir+'**/*.js',
            config.cssDir+'**/*.css'
        ]).on("change", browserSync.reload);
});
gulp.task('testless',function(){
    return elixir(function(mix) {
        mix.less('test.less');
    });
});

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

回复内容:

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

var gulp             = require('gulp'),
     browserSync     = require('browser-sync').create(),
     less             = require('gulp-less');

var elixir             = require('laravel-elixir');
//elixir.config.sourcemaps = false;

var config = {
    name : 'baseblue',
    version : '2.0.0',
    proxy : 'localhost:8888',
    jsDir : 'public/js/',
    cssDir : 'public/css/',
    minDir : 'public/min',
    viewDir : 'resources/views/'
}
gulp.task('server', function() {
    browserSync.init({
        proxy: config.proxy,//代理地址
        notify: false,
        open: true
    });
    gulp.watch(['resources/assets/less/test.less'],['testless']);
    gulp.watch([
            config.viewDir+'**/*.blade.php',
            config.jsDir+'**/*.js',
            config.cssDir+'**/*.css'
        ]).on("change", browserSync.reload);
});
gulp.task('testless',function(){
    return elixir(function(mix) {
        mix.less('test.less');
    });
});

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

laravel自带browserSync

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