[ Grunt + Gulp + Rollup + Bower + Yeoman + Browerify + Parcel ] 構建工具淺析及使用場景

有些公司的老項目,會用到這些工程化開發; 我留下了github上的各種實例 *.conf文件都有註釋;
基本上完整的; 如果在跟新了新特性.也可以在我這上面測試嘗新;

Parcel

這個要比webpack入手容易, 學習曲線不會那麼長 ;基本無需配置;看官網的就行了; 但
我覺得webpack 配置起來好玩;

Browerify

讓本地的js 應用服務端的js; require的能力;

webpack

包管理器;loader
https://github.com/cjcj5438/webpack1
https://github.com/cjcj5438/webpack2-3
https://github.com/cjcj5438/webpack4

Yeoman

模板構建工具
集 腳手架工具(YO),構建工具(Gulp,Grunt等)以及包管理器(如npm和Bower)與一身。
發佈一些自己的模塊;要用自己的發佈的纔好; 別人發佈的不太好用

Rollup

Rollup是一個JavaScript模塊打包器,它將小塊代碼編譯成更大更復雜的代碼,例如庫或應用程序。

Rollup 是一個 JavaScript 模塊打包器,可以將小塊代碼編譯成大塊複雜的代碼,例如 library 或應用程序。Rollup 對代碼模塊使用新的標準化格式,這些標準都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解決方案,如 CommonJS 和 AMD。ES6 模塊可以使你自由、無縫地使用你最喜愛的 library 中那些最有用獨立函數,而你的項目不必攜帶其他未使用的代碼。ES6 模塊最終還是要由瀏覽器原生實現,但當前 Rollup 可以使你提前體驗。 我一般會拿來加工js;
它的優點時tree-shaking 而且可以把js 打包成各種模塊形式;cmd amd 等很多
https://github.com/cjcj5438/rollup

流式構建系統 Gulp

https://github.com/cjcj5438/Grunt-Smiple
介紹Gulp是自動化和簡化Web開發的工具包。
工作方式 他是一個stream流的,它工作時就像一個管道;這一節開始,就是上一節的結束;輸入正好對應着輸出;更像一個IO操作;
缺點有時候有些插件跟不上,但是常用的插件還是很好用的;還有一點他是基於流的,網上有些不能跑通時;要自己基於流式開發工具,要對node的IO操作有一定的儲備知識;

grunt搭建自動化

https://github.com/cjcj5438/Grunt-Smiple
優點:學習成本低,容易上手.社區插件成熟;插件非常多
缺點出來的年份比較早;在處理ES6的語法,要落於其他構建工具

Bower 包管理器

我看了一些文章說現在官方已經停止維護;
npm 和bower 的最大區別,就是 npm 支持嵌套地依賴管理,而 bower只能支持扁平的依賴(嵌套的依賴,由程序員自己解決)。

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章