gulp 與 Webpack 的異曲同工之處

jackwang 發(fā)布于2019-08-22 11:15 / 1976人閱讀

摘要：所以我么的都會寫到中當(dāng)然可以采用插件將文件抽離，我的文章有寫到更側(cè)重于通過加載器的編譯轉(zhuǎn)換，可以將任何形式的文件都會打包成模塊例如模塊模塊圖片模塊媒體模塊等等。

gulp

我們可以認(rèn)為是前端開發(fā)的生產(chǎn)線，gulp.task()則是每臺運(yùn)作的機(jī)器，

當(dāng)啟動gulp的時(shí)候，電閘就會被合上，所有的機(jī)器開始工作，

啟動本地server ，編譯sass，編譯commenjs，多chrunk文件，打包壓縮，mock數(shù)據(jù)等，都各干各的，哪里來src就通過配置到哪里去dist

gulp 主要關(guān)注點(diǎn)是 track() 當(dāng)生產(chǎn)間沒有機(jī)器的運(yùn)作 很難將各個(gè)文件 加工成結(jié)果文件

webpack

webpack則不同 他更側(cè)重于 工程化，是模塊化的打包機(jī)，是對各種資源進(jìn)行模塊化，

他主要處理各種各個(gè)模塊的依賴文件，只要模塊間有依賴 都會進(jìn)行處理，不是該模塊的，就不會受影響

不同與gulp的路勁配置，會使得路徑下的各個(gè)文件都可能會受影響

webpack對各個(gè)模塊的管理 主要通過入口文件app.js建立依賴關(guān)系。

所以我么的js、css都會寫到app.js中 當(dāng)然可以采用插件將css文件抽離，我的webpack文章有寫到

webpack更側(cè)重于 loader 通過loader加載器的編譯 轉(zhuǎn)換 ，可以將任何形式的文件都會打包成模塊 例如：js模塊、css模塊、圖片模塊、媒體模塊等等。

綜上所述

gulp 和 webpack 都可以實(shí)現(xiàn) 文件的打包壓縮，啟動服務(wù)，mock數(shù)據(jù)，編譯sass，編譯es6等，只是側(cè)重點(diǎn)不同而已，
但是 gulp可以引入webpack，引入gulp-webpack就可以，而webpack則對gulp再次封裝，引入了loader 將項(xiàng)目模塊化更徹底，二者相輔相成......


個(gè)人理解，如果有什么欠缺的會繼續(xù)補(bǔ)充.....

GPU云服務(wù)器云服務(wù)器異曲同工不同之處 webpack的作用 webpack的cdn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92031.html

相關(guān)文章

webpack 3 零基礎(chǔ)入門教程 #1 - 介紹

摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。更是明顯強(qiáng)調(diào)模塊化開發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來說一下 webpack 是什么。 webpack 的...

張紅新 2019-08-21 17:55 評論0 收藏0
PostCSS自學(xué)筆記（一）【安裝使用篇】

摘要：而則可制定個(gè)人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經(jīng)等不及安裝使用了吧。安裝及使用一般是結(jié)合自動化工具使用，如果要單獨(dú)使用可以安裝，這里我先對的安裝使用講解下。接下來說點(diǎn)實(shí)際的，如何利用結(jié)合自動化工作在項(xiàng)目中使用。 PostCSS介紹 PostCSS是一個(gè)利用JS插件來對CSS進(jìn)行轉(zhuǎn)換的工具，這些插件非常強(qiáng)大，強(qiáng)大到無所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評論0 收藏0
前端模塊化和構(gòu)建工具

摘要：以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯(cuò)的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺，而不只是一個(gè)打包工具。以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯(cuò)的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。如今，網(wǎng)頁不再...

ad6623 2019-08-20 18:37 評論0 收藏0
基于 Gulp + Browserify 構(gòu)建 ES6 環(huán)境下的自動化前端項(xiàng)目

摘要：本文特此給大家介紹下如何使用配合來構(gòu)建基于的前端項(xiàng)目。最后，在目錄下會生成最終的項(xiàng)目文件。執(zhí)行單元測試本例中使用進(jìn)行單元測試。隨著React、Angular2、Redux等前沿的前端框架越來越流行，使用webpack、gulp等工具構(gòu)建前端自動化項(xiàng)目也隨之變得越來越重要。鑒于目前業(yè)界普遍更流行使用webpack來構(gòu)建es6(ECMAScript 2015)前端項(xiàng)目，網(wǎng)上的相關(guān)教程也比...

yuanxin 2019-08-19 18:05 評論0 收藏0
基于koajs的web項(xiàng)目構(gòu)建(二)

摘要：根據(jù)基于的項(xiàng)目構(gòu)建一所描述的，建立了項(xiàng)目的基本目錄結(jié)構(gòu)，接下來的工作便是編碼，編譯，測試，發(fā)布。對于自己，僅作文去嘗試清楚的闡述自己構(gòu)建項(xiàng)目的一些實(shí)踐。隨意的編碼風(fēng)格最終導(dǎo)致項(xiàng)目代碼的可維護(hù)性低，新加入成員學(xué)習(xí)成本提高。根據(jù) 基于koajs的web項(xiàng)目構(gòu)建（一）所描述的，建立了項(xiàng)目的基本目錄結(jié)構(gòu)，接下來的工作便是編碼，編譯，測試，發(fā)布。做為這些工作，每一項(xiàng)工作都有自己的學(xué)問，針對這...

ZweiZhao 2019-08-20 10:49 評論0 收藏0