不知道什麼時候開始，前端開發已經到了不開乙個 watcher 就無法工作的地步了。不依賴 gulp、babel、webpack，還能優雅地寫**嗎？
那我就帶你來回顧一下這一切是怎麼發生的。
從哪開始說好呢？我們就從『前端打包』開始吧。
前端打包
很久以前（也就五年左右吧，但是五年前端已經大變樣了），頁面的 js 壓縮（混淆）一般是用谷歌的 closure compiler 做的。但是突然蹦出來個 node.js，前端開發者們就開始第一次小試牛刀了，用 node.js 來做 js 壓縮，一般都是用 uglify-js 來做。
js 壓縮做了，css 壓縮是不是也可以做？js lint 是不是也可以做？自動測試是不是也可以做？檔案合併是不是也可以做？
於是 grunt 應運而生，它可以幫你把這些事情都做了，只需要配置乙個簡單的 gruntfile 即可。
同一時期，amd 和 commonjs 也出現了，node.js 用 commonjs 載入模組，瀏覽器用 amd 來載入模組。前端們覺得可以統一一下，都用 commonjs 來寫，於是用上 browserify 之類的工具。
好了，這個時候乙個前端專案需要有乙個 grunt（後來又有了 gulp 等）任務用來打包前端資源，看起來就是乙個標配了。
框架的興起
前端們一直吐槽新手們用 jquery 寫出的「義大利麵條」式的**，於是發明的了一些框架，一開始比較火的是 mvc 框架（如 backbone.js），火了沒多久，前端們發現 mvc 框架有很多相似的**都是在做「繫結事件」「更新 view」這些事情了，於是發現了 mvvm 框架（一種早年間被微軟玩過的設計模式），最著名的庫就是 angularjs。
此時的庫都是不需要額外用 grunt 做轉譯的。
直到 react 的出現。react 背後的工程師（顯示不是前端）發明了一種新的語法——jsx，把 html 和 js 混合起來寫。前端們看了一眼表示這才是寫模板正確的姿勢。唯一的問題是這種語法瀏覽器不支援，於是需要把 jsx 翻譯成 js。
此時 grunt 大概也因為效能太低被 gulp 取代了。
於是此時用 react 的專案一定會去用 gulp 將 jsx 翻譯成 js。
ecmascript 的發展
同時期，es 發展也是非常迅猛。
ie 8 不支援 es5，於是前端們說，「ie 8 去死吧」，不想再支援 ie 8 了，因為那幾年移動端發展迅猛，網頁主要都是 h5 頁面（不要問 h5 是不是 html5，不是 html5），所以很多前端確實不需要管 ie 8。現在想想，windows phone 的失敗，真是前端的福音啊。
前端就開始追新了，一定要第一時間用上最新版的 js 語法。但是即便是 chrome 和 firefox 也不可能那麼快就支援最新語法。於是前端說，不過就是在 gulp 裡再加一道轉譯嘛，用 babel 把 es 2016 的語法轉譯成 es 5 就好了。
於是 gulp 裡又多了一項任務。
重新思考
經過這兩三年的飛速發展，前端們是不是應該重新思考一下，做乙個網頁之前要加這麼多 gulp 任務的初衷到底是什麼？是否解決了問題。
從目前的結果來看，基本可以總結為
dom 不好用，換成虛擬 dom
css 不好用，換成 css in js
瀏覽器支援的 js 不好用，換成 es 最新版語法，然後轉譯為瀏覽器支援的 js
dom event 不用了，去新造乙個 event 機制。
gulp 用得太多了 watch 很慢，於是加上了 hot module replacement
基本把能拋棄的都拋棄了。
實際上這些變化非常適合複雜的 web 應用，然而 90% 的頁面根本不是單頁面應用好嗎！
能不能讓我寫乙個 css 乙個 js 重新整理一下就能看到效果！為什麼我要花那麼多時間來學習轉譯工具，以及解決轉譯過程中的各種問題。
總感覺『弊大於利』。甚至有的時候覺得這是『沒有問題，創造問題也要上』。
前端的發展史
最早的html頁面是完全靜態的頁面，預先編譯好的存放在web伺服器上的html檔案。瀏覽器請求某個url時，web伺服器把對應的html檔案扔給瀏覽器，現實網頁，而動態建立html檔案的方式 asp。jsp，php 第一階段 是js原生通過瀏覽器解析機制，它的原理是使用瀏覽器提供的原生api 結合j...
前端架構發展史
最初，前端是沒有架構的，因為功能簡單的 毫無架構可言。通過乙個簡單的jquery庫操作dom就能完成的工作，無需複雜的設計模式和 管理機制，也就不需要架構來支援起應用。前端開發的發展歷史分為以下幾個階段 一旦前端應用需要從後端獲取資料，就意味著前端應用在執行時是動態地渲染內容的，這便是model 模...
WEB前端 html簡介 發展史
1 概念 站在顯示文字內容的角度去看，瀏覽器與word的原理一樣，我們可以將瀏覽器當成乙個網頁版的唯讀word，瀏覽器也必須有一套自己能識別的標記文字的規範，該規範被稱為html,html全稱是超文字標記語言 hypertext markup language 超文字 指的是用超連結的方法，將各種不...