关于 npm script 我写了本掘金小册，还配了视频（内附限量优惠码）

不夸张的说，这多是目前社区中最完整的把 npm script 和前端工做流相结合并运用到实际项目中的文字 + 视频版教程了，内容源于我对最佳实践的积累和实战，也是我精心编写和录制 1 个月的成果。

互联网大潮和前端社区的蓬勃发展让现代前端项目的复杂性比 5 年前翻了好多倍，前端工做流中也出现了愈来愈多工程化的环节，好比代码风格检查、自动化测试、自动化构建、自动化部署、服务监控、依赖管理等。

咱们面临什么问题？

大多数前端工程师的工做流可能都离不开 gulp、grunt、webpack 这样的重量级构建工具，而是否能熟练运用这些工具将重复任务自动化也是工程师素质的重要体现，我本人也是这些自动化工具的忠实粉丝，由于它们确实能帮我解决问题。但几番折腾以后，你可能已经像我同样感觉到明显的痛点：好比对插件依赖严重（开发者的自由度受限），插件和底层工具文档脱节，调试变的更复杂等，在这点上，咱们并不孤独，社区已经有人对上面的问题做出总结并写了文章：Why I left gulp and grunt for npm scripts。

就我本身的亲身经历，我曾接手维护过使用了 39 个 gulp 插件的项目，由于项目起步较早，部分插件所依赖的基础工具版本都比较老，当这些插件所依赖的基础工具升级以后，gulp 插件自己并无更新的那么快，我不得不 fork 原仓库去维护内部的版本，而当 gulp 发布了新版本以后，升级插件更是一场艰苦的持久战。

冷静思考下来，上面这种复杂性其实并无必要，在软件工程里面有个重要的原则，就是简单性，越是简单的东西越是可靠，从几率论的角度，任何系统环节越多稳定性越差。

咱们该怎么解决问题？

相比而言，直接使用 npm 内置的 script 机制已经被无数开发者证实是更好的选择，它能减轻甚至消除上面的痛点：你能够直接使用海量的 npm 包来完成你的任务、不须要在插件文档和基础工具文档间来回切换，最重要的点，不使用 grunt 之类的构建工具能让你的技术栈相对更简单，而我在作技术选择是遵循的基本原则是简单化，简单才有可能容易让别人上手。

使用 npm script 各类基础工具你均可以信手拈来，只要你会使用 npmjs.com 去搜索，或者去 libraries.io 上搜索。

可能有同窗会反问，Talk is cheap, show me the data，下面这张图是最好的证实：

更精确的数据是：截止 2017年11月，grunt 插件 6309 个，gulp 插件 3367 个，webpack 插件数量 2174 个，而 npm 包多达 594438 个，而且还在飞速增加。

那 npm script 为何没有没有在构建工具中成为主流呢？可能大多数人以为使用 npm script 须要很强的命令行功底、或者它不够强大、或者它不能跨平台。能够很负责任的说，社区发展到如今，上面的担忧都是多余的。

如何更快更好的解决问题？

这也是掘金小册《使用 npm script 打造超溜前端工做流》的切入点，我在这本小册中会用 step-by-step 的方式讲解现代前端工做流中的 npm script 用法。即便你是命令行小白，也能轻松跟上，小册会以实际前端项目为底板逐步介绍更高阶的话题。学完这本小册，你将熟知使用 npm script 打造前端工做流要用的各类小工具和技巧。

小册的内容划分为 4 篇：

• 入门篇：建立和运行 npm script，熟悉和理解基本套路，分 3 小节；
  • 1.1 建立并运行 npm script 命令
  • 1.2 运行多个 npm script 的各类姿式
  • 1.3 给 npm script 传递参数和添加注释
• 进阶篇：原来 npm script 还能够这样用？分 3 小节，介绍生命周期机制、内置和自定义变量的声明和使用、命令行自动补全等话题；
  • 2.1 使用 npm script 生命周期钩子
  • 2.2 在 npm script 中使用环境变量
  • 2.3 实现 npm script 命令自动补全
• 高阶篇：如何管理复杂的 npm script？分 3 小节，介绍；
  • 3.1 让 npm script 跨平台兼容
  • 3.2 用 scripty 管理复杂的 npm script
  • 3.3 用 node/shell 脚本替代复杂的 npm script
• 实战篇：如何用 npm script 来辅助前端工做流？分 5 小节；
  • 4.1 监听文件变化并自动运行 npm script
  • 4.2 结合 live-reload 实现自动刷新
  • 4.3 在 git hooks 中运行 npm script
  • 4.4 用 npm script 实现构建流水线
  • 4.5 用 npm script 实现服务自动化运维

为了方便你们阅读小册时更加容易上手，我为小册的每一个章节都录制了视频教程（视频下载地址在小册末尾），想了解我视频教程风格和质量的同窗能够看我专栏的历史文章：styled-components、javascript-async-await。视频目录以下：

适合什么群体？

• 拥抱 无情的推进自动化 开发理念的工程师，不限前端；
• 感觉到 grunt、gulp 之类工具的笨重和不便，想要更轻量级的解决方案；
• 想玩转 npm script，不断打磨本身硬技能，提升平常工做效率的同窗；
• 愿意由于我编写小册和录制视频而付出的心血而请我喝杯咖啡（19.9元）的同窗；

你会学到什么？

• 理解使用 npm script 的关键知识要点；
• 掌握 25 个 npm script 实战技巧，章节虽少，可是每一个章节都是浓缩的；
• 收获使用 npm script 和各类小工具搞定各类前端工程自动化需求；
• 获得我长期积累和迭代出来的 npm script 集合，直接运用到项目中；

你要准备什么？

• Node.js 运行环境，最好是 v8.x 以上版本，建议使用 nvm 来安装，Windows 下的用户可使用 nvm-windows；
• 能够用来输入和执行命令的终端程序，好比 Mac 下的 iTerm，或者 Windows 下的 cmd；
• 2 小时的闲暇时间，读完这本小册，并能本身上手实践，由于纸上得来终觉浅；

读者反馈如何

下面是到目前为止小册文字部分收集到的部分读者反馈，对于每位读者的留言，我都会认真回复，若是你加了读者交流群，在群里提到的问题，我也会尽力解答。

关于视频部分呢？若是你够细心，你能获得小册内容以外的不少东西，毕竟视频里面我整个开发环境都展现出来了，欢迎来撩（微信：feweekly）！

若是这篇小册涵盖的内容跟你的技能修炼路线图吻合，强烈建议你阅读完整内容（代价是请我喝杯咖啡，😆），对于怕冲动付费的同窗，小册开放了部分章节供你试读。

再次附上小册地址：用 npm script 打造超溜的前端工做流和个人专属限量 8 折优惠码：npm-script-2018-8。

做者简介

我是王仕军，爱折腾、爱分享的前端老司机，实名在网上生活了 5 年有余，6 年以上前端开发经验（实际是 8 年，哈哈），4 年大型互联网公司工做经验；掘金专栏做者；熟知（是的，到如今我还不敢说精通） Javascript、Node.js，对开发效率和软件质量有极致追求。目标是 Be a Power User of Everything。

最后，但愿我写的东西对你有用！