Application npm script complex scenes

With complex functions and operations, npm script will continue to increase and rewriting, package.json the script will increasingly bloated and noisy chaos, is not easy to read. This time, we will think of pumped the npm script file them.

scripty Solutions

npm community has scripty 'Help. Look at how to do

Installation dependencies

npm install scripty -D
// 或
yarn add scripty -D
复制代码

Create directories and files

1. Contents scripts and scripts / create a cover. dependencies scripty scripts directory is the default configuration directory, aliases may be provided.

mkdir -p scripts/cover
// 或
mkdir scripts && mkdir scripts/cover
复制代码

2. file scripts / cover.sh, create scripts / cover / server.sh and scripts / cover / open.sh of. You can be cover:clean、cover:archive、precover、cover 和 postcoverextracted to a file (cover.sh) in.

// 抽取文件的创建
touch scripts/cover.sh
touch scripts/cover/server.sh
touch scripts/cover/open.sh
复制代码

3. give permission, otherwise there is an error due to insufficient privileges. Do not understand the syntax does not matter.

// 给 *.sh 脚本赋予可执行权限
chmod -R a+x scripts/**/*.sh
复制代码

write

1. scripts/cover.shFile Content

#!/usr/bin/env bash

# precover(cover:clean) 清理 覆盖率报告
rimraf coverage && rimraf .nyc_output

# cover 生成 覆盖率报告
nyc --reporter=html npm run test

# cover:archive 归档 覆盖率报告  
cross-var \"make-dir coverage_archive/$npm_package_version && cross-var cpr coverage coverage_archive/$npm_package_version -o\"

# postcover 执行并打开覆盖率报告 
npm-run-all --parallel cover:server cover:open
复制代码

2. The scripts/cover/server.shcontents of the file

#!/usr/bin/env bash

cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port
复制代码

3. The scripts/cover/open.shcontents of the file

#!/usr/bin/env bash

sleep 1

cross-var open http://localhost:$npm_package_config_port
复制代码

package.jsonDocument scriptscontent

"scripts": {    
    "//scripty": "# 复杂命令抽取",
    "cover": "scripty",
    "cover:server": "scripty",
    "cover:open": "scripty"
}
复制代码

Analyze

*.sh We use Node.js file is written;
sleep 1 Synchronization delay effect, similar to the PHP language sleep, make sure the file system writes;
package.json The scripts become more concise;

carried out

npm run cover
复制代码

Node.js Solutions

With Node.js to solve has two advantages:

Can achieve cross-platform (remember npm script between the end of our cross-compatible to achieve it);
On deft;

NOTE: Based dependencies scripty

Installation depends

npm install shelljs chalk -D
// 或
yarn add shell chalk -D
复制代码

write

1. Create a directory with files

// 目录创建
mkdir scripts
// 文件创建
touch scripts/cover.js
复制代码

scripts/cover.jsContents of the file (replace cover/cover.sh)

const { rm, cp, mkdir, exec } = require('shelljs');
const chalk = require('chalk');
const log = function (ctx, fn) {
    fn = fn ? fn : chalk.green;
    console.log(fn(ctx));
};


log('清理覆盖率报告', chalk.blue);
rm('-rf', 'coverage');
rm('-rf', '.nyc_output');

log('生成覆盖率报告');
exec('nyc --reporter=html npm run test');

log('归档覆盖率报告');
mkdir('-p', 'coverage_archive/0.0.2');
cp('-r', 'coverage/*', 'coverage_archive/0.0.2');

log('执行并打开覆盖率报告');
exec('npm-run-all --parallel cover:server cover:open');
复制代码

3.package.json in scripts

"scripts": {
    "cover": "node scripts/cover.js",
    "cover:server": "scripty",
    "cover:open": "scripty"
}
复制代码

Analyze

script/server.shAnd the script/open.shfile is still needed
In mkdirand cpcommand (shelljs), the predefined variable $npm_package_versionis not recognized;

carried out

npm run cover
复制代码

You can

The last chapter: npm script files and automatically monitor refresh

The next chapter: npm script used in git hooks in

Reproduced in: https: //juejin.im/post/5cfd0a1451882502f9490fb8