不誇張的說,這可能是目前社群中最完整的把 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
。
最後,希望我寫的東西對你有用!