@wbi/cli-service/build/watch.js

local service for wb-cli projects

/**
 * Created by Administrator on 2019/2/8.
 * 文件监听
 * 监听构建配置文件和src下的pug、js、css、image变化时需要刷新浏览器或者热替换
 */
const path = require('path')
const chokidar = require('chokidar') // 用于监听文件是否修改
const utils = require('./utils')

module.exports = function (compiler, hotMiddleware) {
  // 定义一个监听器，监听src目录
  const watcher = chokidar.watch(utils.resolve('./src'))

  let isPugChange = false
  let isJsChange = false
  let isStyleChange = false
  let extrasTimer = null

  // 监听文件发生变化
  watcher
    .on('change', file => {
      // pug文件发生变化
      if (/\.(pug|jade)$/.test(file)) {
        isPugChange = true
        isJsChange = false
        isStyleChange = false
        return
      }
      // js文件发生变化
      if (/\.(js|jsx)$/.test(file)) {
        isJsChange = true
        isPugChange = false
        isStyleChange = false
        return
      }
      // 样式文件发生变化
      if (/\.(sass|scss|less|css)$/.test(file)) {
        isStyleChange = true
        isPugChange = false
        isJsChange = false
      }
    })
    .on('raw', (event, file, details) => {
      // 其他文件发生变化
      // 刷新整个页面
      // 这里主要是为了解决批量替换图片时，浏览器不刷新
      if (!(/\.(pug|jade|js|jsx|sass|scss|less|css)$/.test(file))) {
        clearTimeout(extrasTimer)
        extrasTimer = setTimeout(() => {
          // 让hot middleware发布一个reload的事件
          hotMiddleware.publish({ action: 'reload' })
        }, 500)
      }
    })

  // 监听src子目录的pug-lint
  // const publishPugLint = watchPugLint(watcher, hotMiddleware)

  // 监听配置信息被修改时，重启webpack服务
  // 提示浏览器显示弹窗信息：正在重启服务...
  let restartTimer = null
  chokidar.watch(utils.getConfigFiles()).on('change', file => {
    clearTimeout(restartTimer)
    restartTimer = setTimeout(() => {
      hotMiddleware.publish({ action: 'reloadServer', file })
      setTimeout(() => {
        process.send({ action: 'restart' }) // 向父进程传递消息信号
      }, 100)
    }, 400)
  })

  // 当监听到html-webpack-plugin编译完成时，有可能需要浏览器刷新页面
  let reloadTimer = null
  compiler.hooks.compilation.tap('HtmlWebpack', compilation => {
    // compilation.errors.push(new Error('测试错误信息'))
    compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('htmlWebpackPluginAfterEmit', function (htmlPluginData, callback) {
      // 只要不是来自样式文件的修改，都刷新整个页面
      // 来自样式文件的修改，可以做到热替换
      if (isPugChange || isJsChange) {
        // 让hot middleware发布一个reload的事件
        clearTimeout(reloadTimer)
        reloadTimer = setTimeout(() => {
          hotMiddleware.publish({ action: 'reload' })
        }, 50)
      }
      callback()
    })
  })

  /*return {
    publishPugLint
  }*/
}