>[success] # 自動化構建工具
~~~
1.舉個例子當項目在使用一些項目使用 ES6代替Javascript,或者scss語法
的時候,我們往往需要寫完后在執行這些對應語法轉換指令例如:
(1)執行編譯命令:xx.scss->xx.css
(2)執行壓縮丑化命令:xx.js->xx.min.js
如果文件代碼被修改,那么上面兩條命令就要再執行一遍。同樣的,也會有用Less寫CSS,用Jade寫HTML,
用webpack/Browserify模塊化、為非覆蓋式部署的資源加MD5戳等等。自動化構建工具就是用來幫助我們
完成這些重復而機械的工作的
2.'NPM Scripts' 是實現自動化構建工作流的最簡方式,有時候開發階段會在package.json文件里面,
使用scripts字段定義腳本命令,通過指令來執行scss 或者模板工具,壓縮工具的指令,但是存在
問題'對于相對復雜的構建過程就顯得非常吃力'
3.常見的自動化構建工具Grunt、Gulp以及FIS
3.1.'Grunt'由于它的工作過程是基于臨時文件去實現的,所以它的構建速度會相對比較慢,
且處理的環節越多,文件的讀寫次數越多。因此對于超大型項目,文件會非常多,它的構建速度
就會非常慢
3.2.'Gulp' 很好的解決了 Grunt 中構建速度慢的問題,因為它是基于內存去實現的,也就是說它對于
文件的處理環節都是在內存當中完成的,相對于磁盤讀寫速度自然就快了很多。另外它支持同時去執行
多個任務,效率大大提高,且使用方式相比于 Grunt 更加直觀易懂,插件生態同樣非常完善,應該算是目
前市面上最流行的前端構建系統了。
3.3.FIS 是百度的前端團隊推出的一款構建系統它把我們在項目中一些典型的需求盡可能地都集成在內部了
4.可以通過這些自動化構建工具完成類似scss 或者模板工具,壓縮工具的指令統一管理和執行順序
~~~
[Grunt、Gulp以及FIS](https://www.yuque.com/kongdepeng/rgpm60/xfvuom)
[跟多的關于構建工具比較](https://www.cnblogs.com/zs-note/p/7093339.html)
[NPM Scripts 介紹](http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html)
>[danger] ##### 構建工具 和webpack模塊打包工具區別
~~~
1.任務式的構建工具,雖然解決了開發流程中自動化執行預設任務的問題,但不能解決項目中代碼如
何組織成不同功能的代碼包、不同代碼之間如何相互依賴等問題(模塊化問題)
~~~
[參考文章1](https://www.dazhuanlan.com/2020/02/12/5e43b65b6ac40/)
[參考文章2](https://blog.csdn.net/qq_36671474/article/details/82227369)
~~~
1.Grunt和Gulp的工作方式是:在一個配置文件中,指明對某些文件進行類似編譯,組合,壓縮等任務的
具體步驟,工具之后可以自動替你完成這些任務。
2.Webpack的工作方式是:把你的項目當做一個整體,通過一個給定的主文件(如:index.js),
Webpack將從這個文件開始找到你的項目的所有依賴文件,使用loaders處理它們,最后打包為一個
(或多個)瀏覽器可識別的JavaScript文件。
3.總結'Grunt和Gulp' 像是一個流程,例如先執行語法轉換-》在執行壓縮 項鏈式一步一步執行,'webpack'
遇到需要處理的就通過'loaders'處理,這個執行的步驟是看通過入口進入的文件,里面依賴的內容,再根據
配置規則處理依賴的內容。
~~~
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續