關於 npm script 我寫了本掘金小冊，還配了視頻（內附限量優惠碼）

不誇張的說，這多是目前社區中最完整的把 npm script 和前端工做流相結合並運用到實際項目中的文字 + 視頻版教程了，內容源於我對最佳實踐的積累和實戰，也是我精心編寫和錄製 1 個月的成果。

互聯網大潮和前端社區的蓬勃發展讓現代前端項目的複雜性比 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-components、javascript-async-await。視頻目錄以下：

適合什麼羣體？

• 擁抱 無情的推進自動化 開發理念的工程師，不限前端；
• 感覺到 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 小時的閒暇時間，讀完這本小冊，並能本身上手實踐，由於紙上得來終覺淺；

讀者反饋如何

下面是到目前爲止小冊文字部分收集到的部分讀者反饋，對於每位讀者的留言，我都會認真回覆，若是你加了讀者交流羣，在羣裏提到的問題，我也會盡力解答。

關於視頻部分呢？若是你夠細心，你能獲得小冊內容以外的不少東西，畢竟視頻裏面我整個開發環境都展現出來了，歡迎來撩（微信：feweekly）！

若是這篇小冊涵蓋的內容跟你的技能修煉路線圖吻合，強烈建議你閱讀完整內容（代價是請我喝杯咖啡，😆），對於怕衝動付費的同窗，小冊開放了部分章節供你試讀。

再次附上小冊地址：用 npm script 打造超溜的前端工做流和個人專屬限量 8 折優惠碼：npm-script-2018-8。

做者簡介

我是王仕軍，愛折騰、愛分享的前端老司機，實名在網上生活了 5 年有餘，6 年以上前端開發經驗（實際是 8 年，哈哈），4 年大型互聯網公司工做經驗；掘金專欄做者；熟知（是的，到如今我還不敢說精通） Javascript、Node.js，對開發效率和軟件質量有極致追求。目標是 Be a Power User of Everything。

最後，但願我寫的東西對你有用！