（21）npm scripts 实现自动化构建的最简方式

一、什么是 npm scripts

npm 允许在 package.json 文件中，使用 scripts 字段定义脚本命令。

二、npm scripts 自定义脚本命令

三、自动化构建样式文件

四、npm scripts 中任务的执行方式

并行：多个任务一起执行。

串行：多个任务，单个执行，执行完一个再执行下一个。

自动化构建是将多个任务通过一条命令进行执行，成为生产代码，然后进行上线。 

 注意：& （并行执行）在 Windows 下不起作用。

npm-run-all 插件

五、示例

task1.js

setTimeout(() => {
  console.log('Task 1 is running');
}, 3000);

task2.js

setTimeout(() => {
  console.log('Task 2 is running');
}, 2000);

task3.js

setTimeout(() => {
  console.log('Task 3 is running');
}, 1000);

package.json
快捷生成命令：npm init --yes，会省去书写问卷的时间

{
  "name": "scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "t1": "node task1.js",
    "t2": "node task2.js",
    "t3": "node task3.js",
    "p": "run-p t1 t2 t3",
    "s": "run-s t1 t2 t3"
  },
  "keywords": [
    "scrips"
  ],
  "author": "田根旺",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

npm run s 运行结果

npm run p 运行结果

通过运行可以看出2个运行结果顺序是不一样的。

npm run p  结果是321

npm run s 结果是123

task1的是3000ms，task2的是2000ms，task3的是1000ms。

如果是并行那么是321，它是按照3个文件中task1的1000ms先执行，最后执行task3的3000ms。

如果是串行那么是123，是当1执行完以后，再去执行2。