前端工作流全解析

隨著 web 應用越來越複雜，專案的結構和**量也變的愈加龐大，前端人員越來越需要在工程化的層面提高開發效率，前端開發是乙個飛速發展的領域，市面上現在有各種各樣的工具來輔助我們開發，比如說我們在開發過程中就可能會用到下面這些工具：

1.包管理器 npm

我們在開發專案的過程中，會引入各種各樣的依賴，比如說：

管理器在幫助我們安裝專案依賴的時候，也會幫助我們安裝包的依賴，比如說包管理器在安裝 semantic-ui 的時候，發現 semantic-ui 使用到了 jquery，那麼包管理器就會幫助我們安裝 jquery 。我們會使用到的包管理器是 npm。

npm不僅可以幫助我們安裝包，也能夠幫助我們更新、解除安裝和分析包。

2.任務流工具grunt 和 gulp

但是僅有包管理器還是不夠的，比如你在專案開展的過程中要進行**檢查，編譯scss檔案，合併sprite，壓縮合併**，這些乙個乙個的動作我們叫做任務，這些任務是乙個接著乙個執行的，我們把它叫做任務流，幫我們做任務流的工具，我們叫做任務流工具。

grunt 和 gulp就是任務流工具，但是任務流工具沒辦法幫助我們支撐模組化開發，隨著 commonjs 和 es6 的出現，模組化開發在前端有了越來越多的實踐。

3.模組打包器 webpack

但是在目前瀏覽器環境**滑塊化還是無法使用，所以如果有乙個工具能夠讓我們在開發的時候使用標準的模組化語法，而上線的時候有幫助我們對**進行編譯轉換合併成單個檔案讓瀏覽器來執行，這個工具我們把它叫做模組打包器。

事實上 webpack 不僅僅幫助我們打包檔案，他還會做一些任務流工具做的工作，比如說編譯檔案，**檢查。

4.生產依賴和開發依賴

生產依賴

js 框架：react

css 框架：semantic-ui,bootstrap

如果你的**風格偏向函式式程式設計，你可能會用到 lodash 或者 underscore

如果你的專案涉及到資料互動，你還需要 axios 來幫你發起ajax 或者 http 請求

開發依賴

模組打包器 webpack

任務流工具 gulp

如何區分開發依賴和生產依賴？

當你的專案放到瀏覽器端去執行的時候你還需要它嗎？如果需要那它就是生產依賴，反之則是開發依賴。