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

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

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

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

1
2
3
4
sass_test/
-- dist
-- src
-- package.json

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"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 实现多任务同步执行。