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')))
  1. 在浏览器中访问:http://localhost:2333/html/ ,编辑index.html文件保存后会发现浏览器自动刷新
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值