我們?cè)谇懊?a href="http://www.reibang.com/p/4149dc24f6a0" target="_blank">《 Node.js的本質(zhì) 》一文中初步了解Node.js后，發(fā)現(xiàn)它功能很多呀，這么牛逼的東西趕緊學(xué)習(xí)日月。然而我一直翻看網(wǎng)上各種的教程础废，文檔占卧，都是什么學(xué)習(xí)node內(nèi)核呀愉老，API呀驶兜，node項(xiàng)目呀吞鸭，看得頭暈眼花珊蟀，這個(gè)學(xué)習(xí)曲線這么陡菊值，簡(jiǎn)直打擊熱情嘛，經(jīng)過我一番糾結(jié)育灸，終于確定了學(xué)習(xí)的路線腻窒，Node.js我為其總結(jié)三大塊功能：
- 利用Node.js搭建后臺(tái)；
- 利用Node.js編寫腳本磅崭；
- 利用Node.js實(shí)現(xiàn)前端的自動(dòng)化儿子；
這就是我學(xué)習(xí)Node.js想要達(dá)到的目標(biāo)，毫無(wú)疑問學(xué)習(xí)應(yīng)該由淺入深绽诚，所以大致的計(jì)劃是這樣子的：
- 為了盡快幫助到我的工作典徊，同時(shí)顯示自己是個(gè)專業(yè)的具有逼格的前端當(dāng)然先要有一個(gè)屬于自己的前端自動(dòng)化工具平臺(tái)。利用它實(shí)現(xiàn)下面等等功能（使用工具畢竟是最簡(jiǎn)單的）：
| Task | Explain |
|---|---|
| 編譯 | 編譯 Sass恩够、Less卒落、TypeScript ... |
| 優(yōu)化 | 合并壓縮 JS、CSS ... |
| 圖片 | 壓縮圖片 |
| 文件指紋 | 添加文件指紋（md5） |
| 刷新 | 實(shí)時(shí)自動(dòng)刷新 |
- 然后學(xué)習(xí)寫腳本蜂桶，把它當(dāng)成Java一樣能做一下系統(tǒng)小工具（制作工具是第二步 -- npm腳本）儡毕；
- 最后就是能完整的搭建后臺(tái)，實(shí)現(xiàn)一個(gè)完整的項(xiàng)目扑媚；
開始搭建工具平臺(tái)
Node社區(qū)中有許多的插件可以完成上面所說的自動(dòng)化腰湾，就要用錘子去npm下個(gè)錘子來(lái)用，缺個(gè)螺絲刀就下個(gè)螺絲刀疆股。但是本人懶呀费坊，記不住這多東西，就直接上npm買一個(gè)工具箱好了旬痹。這時(shí)就引出三大神器：
- Grunt
- Gulp
- Webpack
Grunt & Gulp 是工具鏈附井、構(gòu)建工具，可以配合各種插件做js壓縮两残，css壓縮永毅，less編譯 替代手工實(shí)現(xiàn)自動(dòng)化工作。
webpack 是文件打包工具人弓，可以把項(xiàng)目的各種js文沼死、css文件等打包合并成一個(gè)或多個(gè)文件，主要用于模塊化方案崔赌，預(yù)編譯模塊的方案意蛀。
—— 來(lái)自博客 郭小北V5
因webpack跟其他兩個(gè)工具本質(zhì)上是不一樣的耸别，所以可以結(jié)合他們兩個(gè)中的一個(gè)管理項(xiàng)目。
webpack 它是預(yù)編譯的浸间，不需要在瀏覽器中加載解釋器太雨。另外，你在本地直接寫JS魁蒜，不管是 AMD / CMD / ES6 風(fēng)格的模塊化，它都能認(rèn)識(shí)吩翻，并且編譯成瀏覽器認(rèn)識(shí)的JS兜看。
現(xiàn)在就先來(lái)第一個(gè)撕逼點(diǎn) Grunt 與 Gulp 那個(gè)好，看了一堆文章狭瞎，反正最后我選了Gulp细移。當(dāng)別人問你為什么的時(shí)候你就這樣回答：
“ 遵循Unix管道機(jī)制，代碼更加簡(jiǎn)單優(yōu)雅熊锭，只要4個(gè)API就能掌控雷電弧轧！什么，Unix管道機(jī)制不懂碗殷？自己百度去吧精绎！”
深入了解看看這篇知乎吧 —— gulp VS grunt · 蕭強(qiáng)
接下來(lái)我們開始搭建自己的自動(dòng)化工作流吧～
下篇《 Node.js 自動(dòng)化工具 - YEOMAN 》
該篇收錄于文集：Node教程
