监听文件变化自动运行

在现代前端开发中，自动化是提升效率的关键。当我们修改代码后，如果能立即获得代码风格检查和单元测试的反馈，将极大提高开发流程的顺畅度。这在 gulp 或 grunt 中通常通过 watch 任务实现。

本节将介绍如何使用 npm script 实现类似的功能，为项目增加自动化测试和代码检查的能力。

单元测试自动化

幸运的是，mocha 自带了 --watch 参数，可以在文件发生变化时自动重新运行所有测试。我们只需在 package.json 的 scripts 中新增一条命令即可。

{
  "scripts": {
    "test": "cross-env NODE_ENV=test mocha tests/",
    "watch:test": "npm test -- --watch"
  }
}

运行 npm run watch:test 后，进程不会退出。此时修改任何测试文件，mocha 都会自动重新执行测试。

代码检查自动化

尽管 mocha 自带 watch 模式，但 stylelint、eslint 等代码检查工具并非都支持。为此，我们可以借助 onchange 工具包，在文件被修改、添加或删除时自动执行 lint 命令。

1. 安装依赖

首先，将 onchange 安装到项目的开发依赖中：

npm install onchange --save-dev

2. 添加 npm script

接下来，在 package.json 中添加 watch:lint 和 watch 命令：

{
  "scripts": {
    "lint": "eslint . && stylelint '**/*.less'",
    "watch": "npm-run-all --parallel watch:*",
    "watch:lint": "onchange -i '**/*.js' '**/*.less' -- npm run lint"
  }
}

命令说明：

• watch:lint：使用 onchange 监听 **/*.js 和 **/*.less 文件的变化。-i 参数确保在启动时立即执行一次 lint 命令。
• watch：使用 npm-run-all 并行执行所有以 watch: 开头的命令，实现测试和 lint 的同时监听。

onchange 在执行命令前，会输出哪个文件发生了变化，这对于追踪问题非常有用。