用 npm script 打造超溜的前端工作流

557 阅读2分钟

前端项目通常会包括多个 npm script。有时候需要将多个命令串行,即脚本遵循严格的执行顺序;有时候则需要让它们并行来提高速度,

串行执行(同步) &&

"test": "npm run lint:js && npm run lint:css && npm run lint:json && npm run lint:markdown && mocha tests/"

并行执行(异步) &

"test": "npm run lint:js & npm run lint:css & npm run lint:json & npm run lint:markdown & mocha tests/"

& wait

加上 wait 的额外好处是,如果我们在任何子命令中启动了长时间运行的进程,比如启用了 mocha 的 --watch 配置,可以使用 ctrl + c 来结束进程,如果没加的话,你就没办法直接结束启动到后台的进程。

npm run lint:js & npm run lint:css & npm run lint:json & npm run lint:markdown & mocha tests/ & wait

npm-run-all

注释

"test": "# 运行所有代码检查和单元测试 \n    npm-run-all --parallel lint:* mocha"

npm script 的钩子 (生命周期的机制)

pre 和 post

运行 npm run test 的时候,分 3 个阶段:

1.检查 scripts 对象中是否存在 pretest 命令,如果有,先执行该命令;

2.检查是否有 test 命令,有的话运行 test 命令,没有的话报错;

3.检查是否存在 posttest 命令,如果有,执行 posttest 命令;

跨平台的 npm script

rimraf 或 del-cli,用来删除文件和目录,实现类似于 rm -rf 的功能;

cpr,用于拷贝、复制文件和目录,实现类似于 cp -r 的功能;

make-dir-cli,用于创建目录,实现类似于 mkdir -p 的功能;

使用安装onchange,文件变化时自动运行 npm script

npm i onchange -D
npm install onchange --save-dev
yarn add onchange -D
    "watch": "npm-run-all --parallel watch:*",
    "watch:lint": "onchange -i \"**/*.js\" \"**/*.less\" -- npm run lint",
    "watch:test": "npm t -- --watch",

使用 livereload 实现自动刷新

它是自动刷新技术的鼻祖,后续的 HMR、HR 等都是它的改良版

在 Git Hooks 中执行 npm script

Git 在代码版本管理之外,也提供了类似 npm script 里 pre、post 的钩子机制,叫做 Git Hooks(钩子),钩子机制能让我们在代码 commit、push 之前(后)做自己想做的事情

Git使用 --no-verify(简写为 -n),参数可以跳过本地检查