gulp到底是幹啥的？
應該說前端發展到今天，已經變得面目全非了。
從jquery一統天下，到現在各種框架的四分五裂，完成這個轉化花的時間，不過短短的一兩年。層出不窮的諸多框架及配套工具，令我們眼花繚亂無所適從，到底應該如何應對，是困擾我們的一個大難題。
全部學習是不可能的，因為我們根本沒那麼多精力；而相信什麼回歸本源（有人主張捨棄一切，擁抱原生），那更是因噎廢食的做法。
有選擇性的學習，讓工具為己所用，最終提升工作效率，達到升職和賺更多薪水，這才是王道（順便也提升一下逼格，出去吹個小牛逼~~）
今天我們就來學習一種簡單好用的工具——gulp。
gulp是用node寫的一個小工具，那麼它能幫助我們做什麼事呢？
1.壓縮代碼。
我們知道，打開一個網頁，是要下載很多文件的。文件越大，下載越慢，訪問速度就慢；而且，有些自以為寫的很漂亮的代碼，我並不希望被別人輕易看到。
這時，我們就可以利用壓縮，先將css、js裡面的空格和換行全去掉，然後將變數名等替換成a，b這樣的名稱。如此一來，文件變小了，也讓人看不懂了，我們的目的達到了。
2.代碼合并。
如上所述，合并代碼，可以減少網路請求，提升訪問速度，然後是解決代碼的互相依賴問題。
3.緩存問題。
有時我們改了某個bug並上線後，用戶訪問到的仍是舊代碼。這就涉及到緩存問題，我們開發階段可以使用ctrl+f5強制清理緩存，但上線後不可能通知讓所有用戶強清；所以只能用加版本號的方式。但一個一個手動加十分麻煩，而且容易遺漏，所以我們需要一種自動化工具幫我們做這件事。
4.圖片壓縮。
做網頁肯定離不開圖片了。有時我們拿到的一張高清圖片體積很大，肯定要經過壓縮處理才能使用，這是很常見的需求，就像吃喝拉撒睡一般。
5.生成精靈圖。
做過css的同學都知道，一般我們會把圖標之類的小圖片，統一放在一張精靈圖中。
然而在修改頻次較高的情況下，頻繁的替換精靈圖並不是個很好的方案。我們希望，小圖片仍舊是小圖片，但精靈圖可以統一生成，gulp可以幫我們搞定這件事。
6.編譯less。
less大家應該都不陌生了，然而它最終仍是需要編譯後，才能被瀏覽器識別的。gulp可以幫我們完成編譯，你只需把精力放在less上就好。
7.css前綴。
我們在寫css3時，有些屬性針對不同瀏覽器都要寫不同的前綴，這個很煩人，這些重複的東西，完全可以由工具來統一添加。
8.語法檢查。
我們在寫js時，有時會忘了添加分號，用了某個變數卻沒有聲明等錯誤，能有個工具幫我們檢查一遍是再好不過的事情。
9.公共頁面復用。
一般網頁都有公用的部分，比如頭部和尾部。然而html並未提供類似include的方法。如果不分離公用部分，頁面一多，改起來就費時了。
gulp可以幫我們達到分離的目的。其實原理很簡單，因為它是node寫的，會提供一個include關鍵詞給你使用，最終編譯成包含頭部和尾部的html就可以了。
10.實時刷新。
在調試代碼時，為了能看到效果，我們經常會手動刷新。如果你覺得這個也費事的話，可以考慮引入gulp的自動刷新工具，這樣你只要一保存代碼，馬上就會看到效果。
11.來源地圖。
假如，我們把一個很大的js文件，壓縮合并成只有幾行的代碼。一旦生產環境報錯了，你很難從錯誤信息中找到蛛絲馬跡。
而gulp提供的來源地圖功能，可以在壓縮合并的同時，生成一個.map文件，這樣我們在調試時，就會直接顯示（映射）源代碼，而不是編譯後的代碼。
好啦，先介紹這麼多啦。大概能想像到的重複工作，gulp都為你想到了，所以，你沒理由不去使用這些可愛的工具，對吧？
別著急，下節課我們就逐一來學習，今天先到這裡吧~~
TAG:從零開始學React |