使用npm-script快速构建实时预览项目

gulp/grunt 等任务流工具开发的脚手架比较复杂，往往要写很多的配置脚本，比较适合正式的项目使用，但是有时候我们又只想搭建一个简单的本地开发预览功能，这个时候用上面说到的任务流工具来开发就显得大材小用了。

npm-script 即利用 nodejs 实现的脚本命令，在 package.json 的 scripts 对象中描述。我们可以用 npm-script 快速实现一个具有浏览器同步更新、监控项目文件更改功能的 Demo，而仅仅只需要修改 package.json，不需要编写额外的配置。

以下面这个 package.json 为例，这个 Demo 的目录结构为：

sass_test/
  -- dist
  -- src
  -- package.json

我需要它完成的功能主要有三个：

1. 处理 src 中的 html 文件和 scss 文件，并将处理好的文件生成到 dist 目录中

2. 以 dist 目录作为服务器根目录，创建本地 http 服务并自动打开浏览器，当目录内容更改时自动刷新

3. 监控 src 目录中的文件，一旦发生更改就重新执行第一个功能

实现上述功能所需的 package.json 如下所示：

{
  "name": "sass_test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "run-p -s clean build:html build:sass browser-sync watch",
    "build:html": "cp 'src/index.html' 'dist/index.html'",
    "build:sass": "dart-sass --no-source-map src:dist",
    "browser-sync": "browser-sync dist -w",
    "watch": "run-p watch:html watch:sass",
    "watch:html": "nodemon -e html -w src -x \"npm run build:html\"",
    "watch:sass": "nodemon -e scss -w src -x \"npm run build:sass\"",
    "clean": "rm -rf dist/*"
  },
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "dart-sass": "^1.25.0",
    "nodemon": "^2.0.2",
    "npm-run-all": "^4.1.5"
  }
}

其中，browser-sync 实现浏览器同步，监控 dist 目录，一旦这个目录的内容发生更改，就刷新浏览器。监控文件的任务由 nodemon 完成，为了提高效率，html 文件和 scss 文件分开监控，通过 npm-run-all 实现多任务同步执行。