browser-sync 无法刷新html页面

修改html页面,browser-sync 无法自动刷新;但css和js 都可以自动刷新;

文件结构

图片描述

//html
gulp.task('htmlTest', function() {
  gulp.src('./*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
})

// 静态服务 设置要监听的目录文件
gulp.task('server', function() {
  var files = [
    './dist/*.html',
    './dist/**/*.css',
    './dist/**/*.js',
    './dist/**/*.{png,jpg,gif,ico}'
  ]
  browserSync.init(files, {
    server: {
      baseDir: './'
    }
  })
})

//监听任务
gulp.task('watch', function() {
  gulp.watch('./*.html', ['htmlTest']);
  gulp.watch('src/style/*.scss', ['cssTest']);
  gulp.watch('src/js/*.js', ['concatjs']);
  gulp.watch('src/images/*', ['imageTest']);
})

//默认执行
gulp.task('default', function() {
  gulp.run('server', 'htmlTest', 'cssTest', 'concatjs', 'imageTest', 'watch')
})
阅读 5.5k
2 个回答
✓ 已被采纳新手上路,请多包涵

解决了,换成下面的就行了==||,自问自答也是醉了


var reload = browserSync.reload;

//html
gulp.task('htmlTest', function() {
gulp.src('./*.html') // 要压缩的html文件

.pipe(htmlmin())
.pipe(gulp.dest('dist/html'))

})

gulp.task('server', function() {
var files = [

'./dist/*.html',
'./dist/**/*.css',
'./dist/**/*.js',
'./dist/**/*.{png,jpg,gif,ico}'

]
browserSync.init(files, {

server: {
  baseDir: './'
}

})
gulp.watch('*.html').on('change', reload);
})

新手上路,请多包涵

有个问题,就是重新生成一个html文件的时候 browserSync并不会监控这个新的html文件,就是保存之后,页面也不会刷新,当然,不是dist里面的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏