用 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 调用次数的命令了。

视频目录

关于作者

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