这是一个简易的关于npm scripts的小教程
什么是npmscripts?
npm scripts就是package.json文件里面，使用scripts字段定义的各种命令
{
"scripts": {
"build": "node build.js"
}
}
复制代码scripts对象可以有很多个属性，每个属性，对应一段脚本命令。上面的代码等同于：
$ npm run build // => node build.js
复制代码npm scripts的原理
npm scripts的底层其实是shell在运行脚本，凡是shell能运行的命令，都可以写在npm scripts里面
修改项目配置项
通过npm init 或者 npm init -f创建一个package.json项目配置文件
通过 npm config set init 修改默认项目的配置项
npm config set init.author.name "qiuliming"
npm config set init.author.url "https://github.com/AaronHale"
npm config set init.author.email "AaronHale@gmial.com"
复制代码通配符
npmscripts可以使用shell脚本的通配符*
"lint": "eslint *.js" //*任意文件
"lint": "eslint **/*.js" //**任意目录
复制代码脚本运行传递参数 使用--
"lint": "eslint *.js"
$ npm run lint -- --fix
复制代码添加运行注释
可以在package.json 中添加已 // 为键的注释：
"//": "eslint检查"
"eslint": "eslint *.js"
复制代码或者 在命令前面加注释
"eslint": "#eslint检查 \n eslint *.js"
复制代码npmscript运行时日志输出
- 默认日志，不用加任何参数
- 没有消息就是最好的消息 --loglevel silent，或者 --silent 更简单的-s
- 尽可能多的显示更多的日志 --loglevel verbose，或者 --verbose，或者更简单的 -d
钩子
- pre
- post
关于钩子这一块，在某些操作前需要做检查、某些操作后需要做清理的情况下非常有用。具体的使用场景，大家可以自行百度，这里就不做详细展开了
使用变量
- 预定义变量
通多npm run env 可以获取到所有变量列表：
npm_package_author_email=AaronHale@gmail.com
npm_package_author_name=AaronHale
npm_package_author_url=http://github.com/AaronHale
.....
.....
复制代码变量的使用方法遵循 shell 里面的语法，直接在 npm script 给想要引用的变量前面加上 $ 符号即可
{
"dummy": "echo $npm_package_name"
}
复制代码- 自定义变量
除了预定义变量外，我们还可以在 package.json 中添加自定义变量，并且在 npm script 中使用这些变量。
"port": {
"env": "7890",
"prod": "80"
}
复制代码命令自动补全
- npm completion 集成到shell
- zsh-better-npm-completion插件
npm 自身提供了自动完成工具 completion，将其集成到 bash 或者 zsh 里也非常容易 官方文档里面的集成方法如下：
npm completion >> ~/.bashrc
npm completion >> ~/.zshrc
复制代码跨平台兼容
-
文件系统操作的跨平台兼容
- rimraf 或 del-cli，用来删除文件和目录，实现类似于 rm -rf 的功能；
- cpr，用于拷贝、复制文件和目录，实现类似于 cp -r 的功能；
- make-dir-cli，用于创建目录，实现类似于 mkdir -p 的功能；
-
用 cross-var 引用变量
- 安装cross-var为开发依赖
- 改写引用变量 npm script，根据cross-var规范
-
用 cross-env 设置环境变量
- 添加 cross-env 到开发依赖
- 改写使用了环境变量的 npm script
npm script 拆到单独文件中
借助 scripty 我们可以将 npm script 剥离到单独的文件中，从而把复杂性隔到单独的模块里面，让代码整体看起来更加清晰:
- 将scripty安装为我们开发依赖， 准备目录和文件，并做相关配置即可
- 准备相关文件和目录
- 修改 scripty 脚本
文件监听，自动运行npmscripts
拥抱现代前端工作流的同学都会有代码风格检查、单元测试等环节，这样就很需要在代码变更之后立即得到反馈，如代码改动导致了那个 Case 失败，哪块不符合团队的编码规范等
-
单元测试自动化 添加--watch 参数
-
代码检查自动化
我们使用的代码检查工具 stylelint、eslint、jsonlint 不全支持 watch 模式，可以借助 onchange 工具包来实现，onchange 可以方便的让我们在文件被修改、添加、删除时运行需要的命令。
使用 livereload 实现自动刷新
- 安装livereload 和 http-server 为项目依赖
- 添加 npm script
"client": "npm-run-all --parallel client:*",
"client:reload-server": "livereload client/",
"client:static-server": "http-server client/"
复制代码- 在页面中嵌入 livereload 脚本
<body>
<h2>LiveReload Demo</h2>
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>
</body>
复制代码- 启动服务 npm run client
npm script 实现构建流水线
在现代前端项目的交付工作流中，部署前最关键的环节就是构建，构建环节要完成的事情通常包括：
- 源代码预编译：比如 less、sass、typescript；
- 图片优化、雪碧图生成；
- JS、CSS 合并、压缩；
- 静态资源加版本号和引用替换；
- 静态资源传 CDN 等。
一些常用的库：
- 图片构建： imagemin
- css压缩 cssmin
- js构建 uglify-js压缩
- 资源版本号和引用替换
- hashmark
- replaceinfiles