glup 4配合gulp connect实现自动刷新

Question

以前用gulp3 实现自动刷新很简单 代码如下

var gulp = require('gulp'),
connect = require('gulp-connect');

gulp.task('html', function () {
    gulp.src('*.html')
        .pipe(connect.reload());
});
gulp.task('connect', function() {
    connect.server({
        port: 8321,
        livereload: true
    });
});
gulp.task('watch', function () {
    gulp.watch(['index.html'], ['html']);
});

gulp.task('default', ['connect','html','watch']);

社会在进步 项目在升级 然后就遇到了坑 新项目里使用gulp4打包后 发现配置完以后自动刷新只刷一次 然后就死了
主要代码如下 注意gulp 4 语法跟3 差别还是挺大的

gulp.task('html', function () {
    console.time('gulp')
    gulp.src('index.html')
        .pipe(connect.reload());
    console.timeEnd('gulp')
});

gulp.task('watch', function () {
    gulp.watch('index.html', gulp.series('html'));
});

gulp.task('default', gulp.series(gulp.parallel('connect','watch')));

然后经过半天的研究 终于找到了原因
其实 单独跑html那个任务的时候 是有错误的

[19:11:15] The following tasks did not complete: html
[19:11:15] Did you forget to signal async completion?

然后就找了下解决这个报错的方法 然后自动刷新就好了 解决方案见链接
https://blog.csdn.net/qq_4120...
推荐 return 跟 回调函数的方法

gulp.task('html', function (done) {
    console.time('gulp')
    gulp.src('index.html')
        .pipe(connect.reload());
    console.timeEnd('gulp')
    done()
});

搞定

Answer 1

只为分享 哈哈哈