gulp4.0浏览器自动刷新

环境版本:

• node版本：v12.2.0
• npm版本：6.9.0
• gulp版本： 4.0.2（node的12.0以上版本需要gulp4.0以上版本，不然会有许多不兼容问题）
• gulp-cli ： 2.2.0
• gulp-connect：5.7.0

gulp4.0简单使用：

gulp4.0与其它低版本的用法有些不一样，这里不做比较，只介绍部分新用法

1. npm init 初始化项目，生成 package.json
2. 新建gulpfile.js文件

//  以下代码会执行在node环境下
const gulp = require( "gulp" ),
    connect = require('gulp-connect');

// 在命令行使用 gulp watch 启动此任务
gulp.task('watch', function () {
    // 监听文件修改，当文件被修改则执行 html 任务
    gulp.watch('./app/js/*.js', gulp.series('js') );
    gulp.watch('./app/css/*.css', gulp.series('css'));
    gulp.watch('./app/html/index.html', gulp.series('html') ); // gulp4.0任务统一使用回调函数，不再支持 ['html'] 这种形式
})

gulp.task('html',function(){
    return gulp.src('./html/*.html')
        .pipe(gulp.dest('dist/html')) // 生成静态文件
        .pipe(connect.reload());    // 刷新浏览器
})
gulp.task('js',function(){
    return gulp.src('./app/js/*.js').pipe(connect.reload());
});
gulp.task('css',function(){
    return gulp.src('./app/css/*.css').pipe(connect.reload());
});

gulp.task('webserver', function() {
    connect.server({
        root: './app/',
        livereload: true,// 自动刷新
        port: 2333
    });
});

// 开启default任务，管理其他任务
gulp.task('default',gulp.series(gulp.parallel('webserver','watch','html')))

3. 在浏览器中访问：http://localhost:2333/html/ ，编辑index.html文件保存后会发现浏览器自动刷新