用 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 年大型互联网公司工作经验;掘金专栏作者;熟知(是的,到现在我还不敢说精通) JavascriptNode.js,对开发效率和软件质量有极致追求。目标是 Be a Power User of Everything

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2018-06-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏草根专栏

.NET Core TDD 前传: 编写易于测试的代码 -- 单一职责

例子, 某软件公司, 原有项目开发, 测试, 售前, 售后, 财务等员工. 后来由于公司没钱, 裁掉了测试, 让开发兼职; 过了段时间, 又裁掉了需求和售后, ...

11330
来自专栏机器学习算法与Python学习

Python数据分析相关资料整理(博客&视频链接)

关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 我们会再接再厉 成为全网优质的技术类...

64680
来自专栏SDNLAB

OpenDaylight发布碳(Carbon)版本,面向更广阔的应用市场

本周二领先的全球软件定义网络开源平台OpenDaylight发布了第六个版本——碳(Carbon),OpenDaylight碳版本的发布增加新的功能,以更好地支...

29340
来自专栏python+iOS学习交流

你为什么要学习Python,有哪些优缺点,如何一个星期学会?

越来越多的工程师使用 Python 进行大数据处理;科研工作者开始使用 Python 来进行数据分析;系统管理员使用 Python 管理 Linux 系统;开源...

20740
来自专栏云计算D1net

公有云进入价格战

2014年3月25日,Google宣布了其云服务的一系列新特性,并大幅降价。第二天,Amazon Web Services也宣布新特性并匹配降价。而3月31...

33950
来自专栏编程

电工学PLC编程的入门建议

十年前,刚开始使用PLC时,也是一头雾水。仗着自己对硬件、工程知识的熟悉,和对组态软件的粗浅了解,硬着头皮接下了任务。当时已经来不及接受培训,相关资料极其缺乏,...

315100
来自专栏带你撸出一手好代码

框架是什么

「框架」一词在编程术语中使用的频繁程度绝对排前五, 框架的数量也成百上千倍于编程语言, 任何一门编程语言都会搭配上一定数据的框架用以提升开发软件产品的效率。 随...

55560
来自专栏云飞学编程

Python零基础同学要怎么开始学python呢?

有好多同学,在学习python的时候,找了一大堆的视频、书籍等等,然后按着教程开始学习,最后发现,总是出错,各种错误,很是烦躁。

18010
来自专栏知晓程序

小程序商店更新:支持模糊搜索,一键复制小程序全名

19220
来自专栏CSDN技术头条

必读|提高代码阅读能力的七种实用方法

随着越来越多的公司使用敏捷开发,能够阅读别人的代码比以往显得更重要。这就需要学习一些如何提高这项技能的技巧。本文提供了7种提高代码阅读技巧的方法,以下是译文。 ...

22980

扫码关注云+社区

领取腾讯云代金券