javascript - gulp+browser-sync 不会自动刷新我的本地项目,求教。
高洛峰
高洛峰 2017-04-11 12:47:29
[JavaScript讨论组]

1.最近尝试着再用gulp配置管理项目资源,感觉非常强大。可是发现gulp+browser-sync自己用不好,百度了很多,尝试了一些办法,均不好使,请教下各位大神。。为什么 不会自动刷新我的本地项目,本地端口8080
2.代码如下:

gulp.task('serve',['less'], function() {
    browserSync({
        //指定服务器启动根目录
        // server: "dist",
        open: "local",
        directory: true,
        browser: "chrome",
        proxy: "localhost:8080"
    });
    //监听es6编译
    gulp.watch(es6Src, function (event) {
        runSequence(
            ['toes5'],
            ['jshint'],
            ['uglify'],
            ['revJs'],
            ['revHtml'],
            ['reload']
        )
    });

均能执行完,运行结果如下


甚是捉急,请大神指点一二,在线等。。。

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
迷茫

你的task任务serve屁股后面少了东西:

});

watch要放到serve这个task里面才行
顺便[less]对应的task你没给出,结尾是否注入刷新状态?:

.pipe(browserSync.reload({stream:true});

给你个最简单清楚的配置- -我这里以监听刷新sass为例

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');
gulp.task('sass',function(){
  gulp.src('dev/scss/**/*.scss')
  .pipe(sass())
  .pipe(dest('dev/css'))
//此处是————————————————————————————————————写法A(A/B二选一)
.pipe(browserSync.stream());
//此处是————————————————————————————————————写法B(A/B二选一)
.pipe(browserSync.reload({stream:true});
}
gulp.task('serve',['sass'],function(){
//指定服务器启动目录
  browserSync.init({server:'dev'});

//监听SCSS文件改变
gulp.watch('dev/scss/**/*.scss',['sass']);
});

写法A和B的区别
写法A:sass源文件dev/scss//.scss变化时,整个页面刷新。*
写法B:sass源文件dev/scss//.scss变化时,只有局部刷新。*

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号