npm script工作流(七) 拆分

• scripty 【点击可传送到相关链接】
  借助scripty 剥离到单独的文件中
  eg.

{  
"scripts": {
    "cover": "nyc --reporter=html npm test",
    "cover:cleanup": "rimraf coverage && rimraf .nyc_output",
    "cover:archive": "cross-var \"make-dir coverage_archive/$npm_package_version && cpr coverage/* coverage_archive/$npm_package_version -o\"",
    "cover:serve": "cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
    "cover:open": "cross-var opn http://localhost:$npm_package_config_port",
    "precover": "npm run cover:cleanup",
    "postcover": "npm-run-all cover:archive --parallel cover:serve cover:open"
  }
}

• 安装依赖

npm i scripty -D
# npm install scripty --save-dev
# yarn add scripty -D

• 准备目录和文件

mkdir -p scripts/cover

命名为 scripts 是 scripty 默认的

• 创建脚本

touch scripts/cover.sh
touch scripts/cover/serve.sh
touch scripts/cover/open.sh

• precover、cover、postcover、cover:archive、cover:cleanup 合并

命令	文件	备注
cover	scripts/cover.sh	内含 precover、postcover 的逻辑
cover:serve	scripts/cover/serve.sh	启动服务
cover:open	scripts/cover/open.sh	打开预览

• 配置权限

chmod -R a+x scripts/**/*.sh

• 修改 scripty 脚本
  scripts/cover.sh 内容如下（cleanup --> cover --> archive --> preview）：

#!/usr/bin/env bash

# remove old coverage reports
rimraf coverage && rimraf .nyc_output

# run test and collect new coverage
nyc --reporter=html npm run test

# achive coverage report by version
mkdir -p coverage_archive/$npm_package_version
cp -r coverage/* coverage_archive/$npm_package_version

# open coverage report for preview
npm-run-all --parallel cover:serve cover:open

• scripts/cover/serve.sh

#!/usr/bin/env bash

http-server coverage_archive/$npm_package_version -p $npm_package_config_port

• scripts/cover/open.sh

#!/usr/bin/env bash

sleep 1
opn http://localhost:$npm_package_config_port

• 修改package.json

{
"script":{
 "cover": "scripty",
  "cover:serve": "scripty",
 "cover:open": "scripty"
}
}