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 实现多任务同步执行。