這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！
最近做了一些總結，之前都是迷迷糊糊，搞不清楚前端之前的相關定位。好好梳理了一下。錯誤之處請各位指正。
本文主要說的是 JavaScript 工作流程
目前前端真的該叫大前端，其越來越細化，越來越複雜。在這種背景下，誕生了很多工具很多前端工作流程。比如熱門的：
- react
- vue
- webpack
- babel
- gulp
- node.js
- npm
- nvm
- angular
- bower
… …
如果繼續寫，估計光這個，字數久能夠達到1000+
這裏邊有的是前端js框架，有的是一些開發工具，但他們種類這麼多，各自能夠解決什麼問題？互相之間有什麼聯繫？是不是一個項目就必須用上這麼多東西？使用時候，如何相互配合？
帶着這些疑問，作爲一個後端程序員，進行了系列調查，要把我的成果分享出來（可能錯誤百出）。
首先前端開發的三大基礎：
- html 這個是最基礎的，被稱爲：超文本標記語言。什麼意思？簡單來說就是描述一個頁面的結構，比如：頁面的頭部，頁面的內容，頁面的尾部。也就說，它控制一個頁面的結構。瀏覽器會按照它定義的結構來進行解析，顯示不同內容。
- css 我們對美的追求是無止境的，光有結構，看起來沒有色彩，有些地方不突出。就像衣服：原始人用樹葉、獸皮，隨着進步，我們穿絲綢、破洞牛仔，搭配絲巾、手錶等等，所以就是用來控制html的樣式，讓它變的更好看。
- JavaScript 這是本文主要闡述的地方，有了html+css，顯然還不能滿足我們的追求，會html、css的人不能叫做前端工程師、更不能叫程序媛。但是如果你會了 JavaScript，江湖就有你的依稀之地，這也是本文主要介紹的部分。
目前我們很多時候常說的前端工程師，其實主要指的就是其 js工程師。在Web世界裏，只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與用戶交互。
功能越強大，責任也越多。現在 js（後面全部使用簡稱，字太多，不想寫）使用的越來越多，早期 js 僅僅用來做一些簡單的交互，隨着現在移動互聯網的發展，各項硬件設備的性能提升。項目越來越複雜，效果越來越酷炫。js 做的事情也更多。
當然今天不講這麼多發展歷史（關鍵是我也沒理清呀），總的來說就是 js 開發工作原來比較簡單，大家隨便寫寫久搞定工作了，但是現在工作的複雜度越來越高，像以前那麼任性的工作，開發麻煩、維護麻煩。還好具備程序員三大美德人，開始構建一些工具。
Perl語言的發明人Larry Wall說，好的程序員有3種美德： 懶惰、急躁和傲慢（Laziness, Impatience and hubris）。
懶惰：
是這樣一種品質，它使得你花大力氣去避免消耗過多的精力。它敦促你寫出節省體力的程序，同時別人也能利用它們。爲此你會寫出完善的文檔，以免別人問你太多問題。
急躁：
是這樣一種憤怒—-當你發現計算機懶洋洋地不給出結果。於是你寫出更優秀的代碼，能儘快真正的解決問題。至少看上去是這樣
傲慢：
極度的自信，使你有信心寫出（或維護）別人挑不出毛病的程序
先是大家感覺js代碼複用是個問題，我們想用別人寫的某個功能，只能網上去翻別人寫的源碼，拷貝下來。後段語言都有自己的包管理工具，比如：java的maven，python的pip，php的composer等。於是在歷史的使命召喚中，npm誕生了，js的包管理工具。
比如以前要使用 jquery，你的到官網去下載，現在 npm install jquery 就可以了。
npm是運行在node的環境上，它們的關係又是另外一個話題，這裏按下暫且不表。
像 react、vue都可以通過npm來安裝。
包管理的問題解決了，接下來又有另外一個問題，由於 js 是 Brendan Eich 這大哥花了 10 天時間設計的（牛人就是這麼屌）。雖然如今廣泛應用，也由於時間緊導致留下了很多設計缺陷。
伴隨了 ES6 的發佈，js越來越規範了，我們程序員肯定都想用好用的簡潔的語法來完成任務，好早點下班回家打lol呀。可惜呀，世界上成百上千萬的網站，不可能一下子全部升級，瀏覽器也不可能立馬就支持最新語法，怎麼辦？babel 誕生了，它牛逼在那裏？讓你可以用es6的語法寫代碼，然後在現在的環境下可以運行（在這裏請自行忽略ie9以下瀏覽器）。
在你用es6寫完代碼後，用它轉碼一下，可以得到es5的代碼。不信？來個例子：
// 轉碼前
input.map(item => item + 1);
// 轉碼後
input.map(function (item) {
return item + 1;
});上面的原始代碼用了箭頭函數，Babel 將其轉爲普通函數，就能在不支持箭頭函數的 JavaScript 環境執行了。
另外 babel 其實也是用js寫的一個工具，所以它還是可以通過 npm install babel-cli 來安裝。
關於它怎麼用，自己看官方文檔。
好。到目前爲止，解決了兩個大問題。接着看前端還有什麼問題？那麼在開發中還有什麼問題需要解決？合併文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等這些都是開發中的重複性任務，以前這些任務都需要單獨人工解決，然後爲了提高效率，早點下班，就有了:Gulp Grunt這些task runner。推薦使用gulp來自動化的執行這些任務。
那麼到了這裏，是不是就截止了？還沒有，現在的基本都講究什麼前後端分離，也就是變成了web app的方式，那麼就要求頁面重新加載要變少，用戶交互要變多，也就導致一個頁面上js越來越多。這麼多的js怎麼管理？如何提高瀏覽器的加在速度？能否將css img html 字體這些資源也當成模塊來處理？在這些問題下，產生了很多模塊打包工具，毫無疑問：webpack是最耀眼的，也是用起來最爽的。
所以模塊打包的問題也解決了，另外說一句，gulp的部分功能可能通過webpack的插件也能解決，但並不意味着不再需要它，一般來說gulp運行在webpack之後。
再次聲明，上面所有介紹的東西，都可以通過npm來安裝獲得。所以說到底它們都是用js寫的一個工具。
ok，那麼工具基本介紹完了，到底頁面怎麼呈現給用戶？後臺傳過來的數據怎麼綁定到dom裏邊去？如果向後臺發起請求獲得數據？等等，這些需要一個js業務框架來完成。所以react、vue就是來解決這些問題的
最後
至此前端的一個工作結構介紹至此結束。再瞎逼逼兩句，學習是一件持續的事情，在學習某個新東西前，先要對它是幹嗎的，它解決一個什麼樣的問題有個認識，然後面對知識你才能在自己的腦海中建立一個體系。
參考了很多資料，貼在這裏供參考:
- [1] 我們爲什麼需要Webpack？
- [2] Vue 對比其他框架
- [3] Webpack、Browserify和Gulp三者之間到底是怎樣的關係？
- [4] Babel-轉碼器
- [5] 用自動化構建工具增強你的工作流程！
想要看看以後寫的文章，請掃碼關注：
