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

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

大多数前端工程师的工作流可能都离不开 gulp、grunt、webpack 这样的重量级构建工具，而是否能熟练运用这些工具将重复任务自动化也是工程师素质的重要体现，我本人也是这些自动化工具的忠实粉丝，因为它们确实能帮我解决问题。但几番折腾之后，你可能已经像我一样感受到明显的痛点：比如对插件依赖严重（开发者的自由度受限），插件和底层工具文档脱节，调试变的更复杂等。

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

可能有同学会反问，Talk is cheap, show me the data，下面这张图（出自这里）是最好的证明：

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

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

这也是这本小册的切入点，我在这本小册中会用 step-by-step 的方式讲解如何使用 npm script 打造轻量级但完整的前端工作流。即使你是命令行小白，也能轻松跟上，小册会以实际前端项目为底板逐步介绍更高阶的话题。学完这本小册，你将熟知使用 npm script 打造前端工作流要用的各种小工具和技巧。

小册的内容划分为 4 篇：

• 入门篇：创建和运行 npm script，熟悉和理解基本套路，分 3 小节；

• 进阶篇：原来 npm script 还可以这样用？分 3 小节；

• 高阶篇：如何管理复杂的 npm script？分 3 小节；

• 实战篇：如何用 npm script 来辅助前端工作流？分 5 小节；

此外，为了方便读者上手实践，我还为每个小节录制的视频教程，想了解我短视频教程风格和质量的同学可以看我专栏的历史文章：styled-components、async/await。

说句题外话，我的 zsh 命令行历史中 npm 已经是仅次于 git 调用次数的命令了。

适合什么群体？

• 拥抱 无情的推动自动化 开发理念的工程师，不限前端；

• 感受到 grunt、gulp 之类工具的笨重和不便，想要更轻量级的解决方案；

• 想玩转 npm script，不断打磨自己硬技能，提高日常工作效率的同学；

你会学到什么？

• 理解使用 npm script 的关键知识要点；

• 掌握 25 个 npm script 实战技巧，章节虽少，但是每个章节都是浓缩的；

• 收获使用 npm script 和各种小工具搞定各种前端工程自动化需求；

• 得到我长期积累和迭代出来的 npm script 集合，直接运用到项目中；

你要准备什么？

• Node.js 运行环境，最好是 v8.x 以上版本，建议使用 nvm 来安装，Windows 下的用户可以使用 nvm-windows；

• 可以用来输入和执行命令的终端程序，比如 Mac 下的 iTerm，或者 Windows 下的 cmd；

• 1 小时的闲暇时间，读完这本小册，并能自己上手实践，因为纸上得来终觉浅；

配套视频目录

关于作者

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

读者福利

• 免费加入读者交流群，和群友讨论和交流读书心得和疑惑问题；

• 免费获得小册视频版教程，网盘下载地址已经附在小册末尾；

最后如果你有兴趣，可以通过长按下方的二维码，以及复制好本公众号专属优惠码（ npm ）享受7折优惠 购买。

长按识别，并在优惠码中输入 npm