Gulp实现页面热更新

前言

运行项目后，改动文件浏览器能够自动刷新可以大大提高工作效率，这项功能通过Gulp能够很轻松的实现。
如果你已经在项目中使用了Gulp，那么直接往下看，如果你还没有使用Gulp，先看这篇入门Gulp入门

功能实现

主要功能通过gulp-connect这个插件实现，先安装这个插件

npm i gulp-connect -save-dev

大概思路就是，运行gulp时启动connect，创建服务端口，监听项目下的所有html/js/css文件，如果发生变化就reload，代码实现如下

const { src, dest, task, series, parallel } = require('gulp')
const { watch } = require('gulp')
const connect = require('gulp-connect')

task('connect', function () {
  connect.server({
    port: 8080,
    livereload: true
  })
})
task('watch', function () {
  watch(['**/*.html', 'css/*.css', 'js/*.js'], function () {
    return src('index.html').pipe(connect.reload())
  })
})

task('run', series(parallel('connect', 'watch')))

exports.default = series('gulp-js', 'gulp-scss', 'gulp-image')

以上就能实现页面的热更新了