NPM与工作流

[coconilu]

概述

与gulp、grunt相比，npm编写工作流更加简单，而且它是支持直接运行通过npm安装的本地或者全局指令的。

1. 基本流程

npm init，创建package.json
npm run {commmand}，运行在package.json里注册的指令

2. 运行多个指令

串行：&&

并行：&

还可以借助第三方库：npm-run-all

3. 传递参数

传递额外指令，需要在前添加--

4. 钩子

每个指令都是有声明周期的，比如npm test：

1. 检查 scripts 对象中是否存在 pretest 命令，如果有，先执行该命令；
2. 检查是否有 test 命令，有的话运行 test 命令，没有的话报错；
3. 检查是否存在 posttest 命令，如果有，执行 posttest 命令。

pre为执行前的前缀，post为执行后的前缀

5. 使用环境变量

指令npm run env可以列出可用的预定义变量列表

除了预定义变量外，我们还可以通过在package.json文件中自定义变量，*nix引用格式是$npm_package_***，windows引用格式是%npm_package_***%

6. 模块化

把npm script拆到单独文件中，可以借助插件scripty

用node.js脚本代替复杂的 npm script，可以借助插件shelljs

7. 监听文件变化

在文件被修改、添加、删除时运行需要的命令，可以借助第三方库onchange

8. 自动刷新

借助第三方库livereload可以帮助我们在修改页面文件的时候刷新页面

9. 构建流水线

源代码预编译：比如 less、sass、typescript；
图片优化、雪碧图生成；
JS、CSS 合并、压缩；
静态资源加版本号和引用替换；
静态资源传 CDN 等。

10. 自动化运维

修改版本号，可以使用指令npm version patch | minor | major

插件

1. 跨平台兼容

rimraf 或 del-cli，用来删除文件和目录，实现类似于 rm -rf 的功能；
cpr，用于拷贝、复制文件和目录，实现类似于 cp -r 的功能；
make-dir-cli，用于创建目录，实现类似于 mkdir -p 的功能；
cross-var，实现跨平台的变量引用；
cross-env ，跨平台设置环境变量；

2. npm-run-all

默认串行处理所有指令
也可以通过添加--parallel并行处理所有指令

3. scripty

借助 scripty 我们可以将 npm script 剥离到单独的文件中，从而把复杂性隔到单独的模块里面，让代码整体看起来更加清晰。

4. shelljs

shelljs 为我们提供了各种常见命令的跨平台支持，比如 cp、mkdir、rm、cd 等命令，此外，理论上可以在 Node.js 脚本中使用任何 npmjs.com 上能找到的包。

5. onchange

借助跨平台的文件系统监听包 chokidar，可以在文件发生变化的时候触发脚本执行

6. livereload

livereload可以在页面文件变动的时候通知浏览器刷新页面，除了启动监听服务，我们还需要在我们的html文件里嵌入一段类似的代码：

<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +':35729/livereload.js?snipver=1"></' + 'script>')
</script>

7. 资源版本号和引用替换

hashmark，自动添加版本号；
replaceinfiles，自动完成引用替换，它需要将版本号过程的输出作为输入；

8. pm2

PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。

总结

优先使用nodejs语法写运行工作流脚本，因为nodejs本来就是跨平台的，而且使用几乎所有npm上可以搜索到的第三方库。

参考

《用 npm script 打造超溜的前端工作流》
npm 中文文档