为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

UYOU 2019-05-19 14:25:18

官方文档地址 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...


查看完整描述

3 回答

?
烙印99

用下面这个语句试试看

const browserSync = require('browser-sync').create()async function serve() {  await browserSync.init(
    {      server: {        baseDir: './src',
      },      files: ['src/**/*.css'], // 这里填写监听的文件列表
    },    function() {      console.log('browser refreshed')
    },
  )
}

exports.default = serve


查看完整回答
反对 回复 2019-05-19
?
哆啦的时光机

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() {

  await browserSync.init({

    server: {

      baseDir: 'src',

    },

    files: ['src/**/*.html', 'src/**/*.css'],

  })

}


function sassTask(cb) {

  return src('src/**/*.scss')

    .pipe(sass().on('error', sass.logError))

    .pipe(dest('src/css'))

}

watch(['src/**/*.scss'], sassTask)


exports.default = series(serve)

这里使用browserSync去监听html和css文件,通过watch去监听scss文件,当scss文件有变化的时候,触发任务sassTask将scss编译为css,生成css文件之后,browserSync监听到css文件的变化,触发自动刷新.


查看完整回答
反对 回复 2019-05-19
?
慕码人2483693

照着 browser sync官网的写法可以实现。 http://www.browsersync.cn/doc...
最大区别是,watch监听html发生变化时进行reload 。 还是奇怪,为何监听css变化时reload不行?

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

    return gulp.src("src/css/*.scss")

        .pipe(sass())

        .pipe(gulp.dest("src/css"))

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

});


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


    browserSync.init({

        server: "./src"

    });


    gulp.watch("src/css/*.scss", gulp.series('sass'));

    gulp.watch("src/*.html").on('change', reload);

});


查看完整回答
反对 回复 2019-05-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信