关于 npm script 我写了本掘金小册,还配了视频

可以毫不夸张的说,这本小册可能是目前社区中最完整的把 npm script 和前端工作流相结合并运用到实际项目中的文字 + 视频版教程了。

互联网大潮和前端社区的蓬勃发展让现代前端项目的复杂性比 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-componentsjavascript-async-await。视频目录如下:

video-toc.png

适合什么群体?

  • 拥抱 无情的推动自动化 开发理念的工程师,不限前端;
  • 感受到 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 小时的闲暇时间,读完这本小册,并能自己上手实践,因为纸上得来终觉浅;

读者反馈如何

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

作者简介

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

感谢读到这里,希望我写的东西对你有用!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容