可以毫不夸張的說，這本小冊可能是目前社區(qū)中最完整的把 npm script 和前端工作流相結(jié)合并運(yùn)用到實(shí)際項(xiàng)目中的文字 + 視頻版教程了。

互聯(lián)網(wǎng)大潮和前端社區(qū)的蓬勃發(fā)展讓現(xiàn)代前端項(xiàng)目的復(fù)雜性比 5 年前翻了好多倍，前端工作流中也出現(xiàn)了越來越多工程化的環(huán)節(jié)，比如代碼風(fēng)格檢查、自動化測試、自動化構(gòu)建、自動化部署、服務(wù)監(jiān)控、依賴管理等。

我們面臨什么問題？

大多數(shù)前端工程師的工作流可能都離不開 gulp、grunt、webpack 這樣的重量級構(gòu)建工具，而是否能熟練運(yùn)用這些工具將重復(fù)任務(wù)自動化也是工程師素質(zhì)的重要體現(xiàn)，我本人也是這些自動化工具的忠實(shí)粉絲，因?yàn)樗鼈兇_實(shí)能幫我解決問題。但幾番折騰之后，你可能已經(jīng)像我一樣感受到明顯的痛點(diǎn)：比如對插件依賴嚴(yán)重（開發(fā)者的自由度受限），插件和底層工具文檔脫節(jié)，調(diào)試變的更復(fù)雜等，在這點(diǎn)上，我們并不孤獨(dú)，社區(qū)已經(jīng)有人對上面的問題作出總結(jié)并寫了文章：Why I left gulp and grunt for npm scripts。

就我自己的親身經(jīng)歷，我曾接手維護(hù)過使用了 39 個(gè) gulp 插件的項(xiàng)目，因?yàn)轫?xiàng)目起步較早，部分插件所依賴的基礎(chǔ)工具版本都比較老，當(dāng)這些插件所依賴的基礎(chǔ)工具升級之后，gulp 插件本身并沒有更新的那么快，我不得不 fork 原倉庫去維護(hù)內(nèi)部的版本，而當(dāng) gulp 發(fā)布了新版本之后，升級插件更是一場艱苦的持久戰(zhàn)。

冷靜思考下來，上面這種復(fù)雜性其實(shí)并沒有必要，在軟件工程里面有個(gè)重要的原則，就是簡單性，越是簡單的東西越是可靠，從概率論的角度，任何系統(tǒng)環(huán)節(jié)越多穩(wěn)定性越差。

我們該怎么解決問題？

相比而言，直接使用 npm 內(nèi)置的 script 機(jī)制已經(jīng)被無數(shù)開發(fā)者證明是更好的選擇，它能減輕甚至消除上面的痛點(diǎn)：你可以直接使用海量的 npm 包來完成你的任務(wù)、不需要在插件文檔和基礎(chǔ)工具文檔間來回切換，最重要的點(diǎn)，不使用 grunt 之類的構(gòu)建工具能讓你的技術(shù)棧相對更簡單，而我在做技術(shù)選擇是遵循的基本原則是簡單化，簡單才有可能容易讓別人上手。

使用 npm script 各種基礎(chǔ)工具你都可以信手拈來，只要你會使用 npmjs.com 去搜索，或者去 libraries.io 上搜索。

可能有同學(xué)會反問，Talk is cheap, show me the data，下面這張圖是最好的證明：

更精確的數(shù)據(jù)是：截止 2017年11月，grunt 插件 6309 個(gè)，gulp 插件 3367 個(gè)，webpack 插件數(shù)量 2174 個(gè)，而 npm 包多達(dá) 594438 個(gè)，并且還在飛速增長。

那 npm script 為什么沒有沒有在構(gòu)建工具中成為主流呢？可能大多數(shù)人覺得使用 npm script 需要很強(qiáng)的命令行功底、或者它不夠強(qiáng)大、或者它不能跨平臺?？梢院茇?fù)責(zé)任的說，社區(qū)發(fā)展到現(xiàn)在，上面的擔(dān)心都是多余的。

如何更快更好的解決問題？

這也是掘金小冊《使用 npm script 打造超溜前端工作流》的切入點(diǎn)，我在這本小冊中會用 step-by-step 的方式講解現(xiàn)代前端工作流中的 npm script 用法。即使你是命令行小白，也能輕松跟上，小冊會以實(shí)際前端項(xiàng)目為底板逐步介紹更高階的話題。學(xué)完這本小冊，你將熟知使用 npm script 打造前端工作流要用的各種小工具和技巧。

小冊的內(nèi)容劃分為 4 篇：

• 入門篇：創(chuàng)建和運(yùn)行 npm script，熟悉和理解基本套路，分 3 小節(jié)；
  • 1.1 創(chuàng)建并運(yùn)行 npm script 命令
  • 1.2 運(yùn)行多個(gè) npm script 的各種姿勢
  • 1.3 給 npm script 傳遞參數(shù)和添加注釋
• 進(jìn)階篇：原來 npm script 還可以這樣用？分 3 小節(jié)，介紹生命周期機(jī)制、內(nèi)置和自定義變量的聲明和使用、命令行自動補(bǔ)全等話題；
  • 2.1 使用 npm script 生命周期鉤子
  • 2.2 在 npm script 中使用環(huán)境變量
  • 2.3 實(shí)現(xiàn) npm script 命令自動補(bǔ)全
• 高階篇：如何管理復(fù)雜的 npm script？分 3 小節(jié)，介紹；
  • 3.1 讓 npm script 跨平臺兼容
  • 3.2 用 scripty 管理復(fù)雜的 npm script
  • 3.3 用 node/shell 腳本替代復(fù)雜的 npm script
• 實(shí)戰(zhàn)篇：如何用 npm script 來輔助前端工作流？分 5 小節(jié)；
  • 4.1 監(jiān)聽文件變化并自動運(yùn)行 npm script
  • 4.2 結(jié)合 live-reload 實(shí)現(xiàn)自動刷新
  • 4.3 在 git hooks 中運(yùn)行 npm script
  • 4.4 用 npm script 實(shí)現(xiàn)構(gòu)建流水線
  • 4.5 用 npm script 實(shí)現(xiàn)服務(wù)自動化運(yùn)維

為了方便大家閱讀小冊時(shí)更加容易上手，我為小冊的每個(gè)章節(jié)都錄制了視頻教程（視頻下載地址在小冊末尾），想了解我視頻教程風(fēng)格和質(zhì)量的同學(xué)可以看我專欄的歷史文章：styled-components、javascript-async-await。視頻目錄如下：

video-toc.png

適合什么群體？

• 擁抱 無情的推動自動化 開發(fā)理念的工程師，不限前端；
• 感受到 grunt、gulp 之類工具的笨重和不便，想要更輕量級的解決方案；
• 想玩轉(zhuǎn) npm script，不斷打磨自己硬技能，提高日常工作效率的同學(xué)；
• 愿意因?yàn)槲揖帉懶院弯浿埔曨l而付出的心血而請我喝杯咖啡（19.9元）的同學(xué)；

你會學(xué)到什么？

• 理解使用 npm script 的關(guān)鍵知識要點(diǎn)；
• 掌握 25 個(gè) npm script 實(shí)戰(zhàn)技巧，章節(jié)雖少，但是每個(gè)章節(jié)都是濃縮的；
• 收獲使用 npm script 和各種小工具搞定各種前端工程自動化需求；
• 得到我長期積累和迭代出來的 npm script 集合，直接運(yùn)用到項(xiàng)目中；

你要準(zhǔn)備什么？

• Node.js 運(yùn)行環(huán)境，最好是 v8.x 以上版本，建議使用 nvm 來安裝，Windows 下的用戶可以使用 nvm-windows；
• 可以用來輸入和執(zhí)行命令的終端程序，比如 Mac 下的 iTerm，或者 Windows 下的 cmd；
• 2 小時(shí)的閑暇時(shí)間，讀完這本小冊，并能自己上手實(shí)踐，因?yàn)榧埳系脕斫K覺淺；

讀者反饋如何

下面是到目前為止小冊收集到的部分讀者反饋，對于每位讀者的留言，我都會認(rèn)真回復(fù)，如果你加了讀者交流群，在群里提到的問題，我也會盡力解答。

作者簡介

我是王仕軍，愛折騰、愛分享的前端老司機(jī)，實(shí)名在網(wǎng)上生活了 5 年有余，6 年以上前端開發(fā)經(jīng)驗(yàn)（實(shí)際是 8 年，哈哈），4 年大型互聯(lián)網(wǎng)公司工作經(jīng)驗(yàn)；掘金專欄作者；熟知（是的，到現(xiàn)在我還不敢說精通） Javascript、Node.js，對開發(fā)效率和軟件質(zhì)量有極致追求。目標(biāo)是 Be a Power User of Everything。

感謝讀到這里，希望我寫的東西對你有用！