Gulp 案例-开发服务器

1. 安装浏览器热更新插件 yarn add browser-sync --dev

2. 在gulpfile.js中引入

const browserSync = require('browser-sync')
const bs = browserSync.create()

const serve = () => {
  watch('src/assets/styles/*.scss', style) // 监听原代码变化以及构建优化，两个参数，第一个是监听对象，第二个是构建方法
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
  // 以下3条在开发过程中不必构建
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)
  // 以下为监听静态资源的变化，当静态资源发生变化自动更新
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)
  
  bs.init({
  	notify: false,  // 右上角的一个小提示
    port: 2080, // 端口
    open: false,  // 自动打开浏览器
    files: '',  // 自动更新浏览器
    server: {
      baseDir: ['dist', 'src', 'public'],  // 跟目录 可以是字符串也可以是数组
      routes: {   // 这个优先于baseDir执行，先去处理routes
        '/node_modules': 'node_modules'
      }
    }
  })
}

// 开发是的构建编译
const compile = parallel(style, script, page)
// 上线之前执行的任务
const build = parallel(compile, image, font, extra)
const develop = series(compile, serve)

module.exports = {
  compile,
  build,
  serve,
  develop
}

3. 运行 yarn gulp serve