猿问
下载APP

gulp 4.0 使用browser-sync 实时重载只能一次?照着官方文档和网上的弄都不行啊

官方文档地址 https://www.gulpjs.com.cn/doc...
我的代码如下 。 最简单的引用一个css ,启动服务后,修改css中body的颜色。 能够热更新一次,之后再改其他颜色就没用了。

gulp.task('serve', function() {

    browserSync({

      server: {

        baseDir: 'src'

      }

    });

    // gulp.watch('./src/**/*.scss',()=>{

    //     console.log(22)

    //     gulp.src("./src/**/*.scss").pipe(sass()).pipe(gulp.dest("./src")).pipe(reload({

    //         stream:true

    //     }))

    // });

    gulp.watch('./src/**/*.css', ()=>{

        console.log(3)

        reload()

    });

  });

gulp.task("ss",gulp.series("serve"))

去掉了sass的内容,只监听css,还是不行,效果一样,都只能热更新一次,之后再改就没用了。


在命令行使用 gulp ss 或者 gulp serve 启动。 如下 , 打印的3,也只能打印1次,只能起一次作用,之后再改就没用了


          >gulp serve

[22:06:53] Using gulpfile F:\ty\1\gulpfile.js

[22:06:53] Starting 'serve'...

[Browsersync] Access URLs:

 --------------------------------------

       Local: http://localhost:3000

    External: http://192.168.0.112:3000

 --------------------------------------

          UI: http://localhost:3001

 UI External: http://localhost:3001

 --------------------------------------

[Browsersync] Serving files from: src

[22:07:01] Starting '<anonymous>'...

3

[Browsersync] Reloading Browsers...


UYOU
浏览 214回答 3
3回答

烙印99

用下面这个语句试试看const&nbsp;browserSync&nbsp;=&nbsp;require('browser-sync').create()async&nbsp;function&nbsp;serve()&nbsp;{&nbsp;&nbsp;await&nbsp;browserSync.init( &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;baseDir:&nbsp;'./src', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files:&nbsp;['src/**/*.css'],&nbsp;//&nbsp;这里填写监听的文件列表 &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('browser&nbsp;refreshed') &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;) } exports.default&nbsp;=&nbsp;serve

哆啦的时光机

gulp.watch("src/*.html",reload)这个只能刷新一次的原因就是上面的解释,这里要使用异步函数,或者使用回调,否则 gulp 不知道任务是否已经完成.gulp.watch("src/*.html").on('change', reload)这个每次更改都能触发刷新,是因为每次change这个事件触发的时候去调用reload,这个时候并不需要去判断这个reload是否已经完成.两种方式的关于如何去使用reload是有区别的.在第一种方式中,reload是当作一个任务,而第二种方式中reload只是单纯的一个回调而已.至于如何选择,就需要结合你想要实现的功能来决定了.关于不用async也可以正常使用,是因为你这里只有一个serve任务需要运行,而这个serve任务并不需要去判断是否已完成,只要运行起来就可以了,后续都交由browserSync和watch去监听执行.当你多有个任务需要启动,并且需要任务按顺序运行的话,就需要用到异步了,或者需要在watch中使用任务的话,也需要使用异步.我写个版本你参考下const { src, dest, watch, series } = require('gulp')var sass = require('gulp-sass')const browserSync = require('browser-sync').create()sass.compiler = require('node-sass')async function serve() {&nbsp; await browserSync.init({&nbsp; &nbsp; server: {&nbsp; &nbsp; &nbsp; baseDir: 'src',&nbsp; &nbsp; },&nbsp; &nbsp; files: ['src/**/*.html', 'src/**/*.css'],&nbsp; })}function sassTask(cb) {&nbsp; return src('src/**/*.scss')&nbsp; &nbsp; .pipe(sass().on('error', sass.logError))&nbsp; &nbsp; .pipe(dest('src/css'))}watch(['src/**/*.scss'], sassTask)exports.default = series(serve)这里使用browserSync去监听html和css文件,通过watch去监听scss文件,当scss文件有变化的时候,触发任务sassTask将scss编译为css,生成css文件之后,browserSync监听到css文件的变化,触发自动刷新.

慕码人2483693

照着 browser sync官网的写法可以实现。&nbsp;http://www.browsersync.cn/doc...最大区别是,watch监听html发生变化时进行reload 。 还是奇怪,为何监听css变化时reload不行?gulp.task('sass', function() {&nbsp; &nbsp; return gulp.src("src/css/*.scss")&nbsp; &nbsp; &nbsp; &nbsp; .pipe(sass())&nbsp; &nbsp; &nbsp; &nbsp; .pipe(gulp.dest("src/css"))&nbsp; &nbsp; &nbsp; &nbsp; .pipe(reload({stream: true}));});gulp.task('serve', function() {&nbsp; &nbsp; browserSync.init({&nbsp; &nbsp; &nbsp; &nbsp; server: "./src"&nbsp; &nbsp; });&nbsp; &nbsp; gulp.watch("src/css/*.scss", gulp.series('sass'));&nbsp; &nbsp; gulp.watch("src/*.html").on('change', reload);});
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答