（41）Gulp Reload热更新

一、Gulp热更新介绍

所谓Gulp热更新就是开发服务器中监视文件的变化，我们再发布服务的时候，我们会进行代码修改，那么我们每次修改完代码，都要重新发布服务，这样很麻烦，有没有一种方法可以实时更新呢？当然有啦！它就是为了我们开发中提高效率而生的！它就是Gulp热更新。

二、如何实现热更新

通过监视src开发目录文件的变化，和dist目标目录文件的变化，进行实时更新，当我们保存的时候，会实时将效果展示到我们的浏览器上。

三、Gulp热更新演示

1.通过ES6解构方式导入watch监听包

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

2.再init对象中定义files文件，这个文件是用来监视dist目标文件的变化的，但是我们写代码的时候是再src下进行书写的，所以我们要通过watch方法进行设置。

watch语法：watch(被监视的文件，对应的任务) 

//声明服务发布任务
const serve = () => {
  //watch(被监视的文件，对应的任务)
  watch('src/*.html',html)
  watch('src/styles/*.less',style)
  watch('src/scripts/*.js',script)
  watch('src/images/**',image)
  bs.init({
    notify: false, //将浏览器右上角的弹窗去除
    files: 'dist/**',//监视dist目标文件下的变化，然后再浏览器上实时更新
    server: {
      baseDir: './dist', //指定服务启动的目录
      routes: {//路由：所谓路由就是一个跳转地址
        '/node_modules': 'node_modules'
      }
    }
  })
}

这样的话我们就成功啦，当我们更改src下的任何代码时，都可以帮我们实时监听，并实时将效果展示再浏览器上。