首页 > 后端开发 > php教程 > laravel elixir如何实现实时预览

laravel elixir如何实现实时预览

WBOY
发布: 2016-06-06 20:23:34
原创
1492 人浏览过

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

<code>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');
    });
});</code>
登录后复制
登录后复制

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

回复内容:

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

<code>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');
    });
});</code>
登录后复制
登录后复制

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

laravel自带browserSync

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板