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

laravelelixir如何实现实时预览

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

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插件。

人气教程排行