【简单理解】gulp和webpack的区别

Gulp和Webpack的基本区别:

gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加快请求速度和减少请求次数;并且gulp有task定义处理事务,从而构建整体流程,它是基于流的自动化构建工具。

Webpack是前端构建工具,实现了模块化开发和文件处理。他的思想就是“万物皆为模块”,它能够将各个模块进行按需加载,不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。

就我而言,我在实际当中会将两种都选择混合使用。虽然两个都可以进行代码的压缩合并减少代码体积,但gulp.config.js中gulp的代码更加简单易懂,需要压缩合并谁就用哪个方法,而webpack样式合并需要在node环境下下载插件才能使用。另一点,gulp 是基于流的打包工具,需要谁,引用谁,并且他的压缩简单明了,后期维护起来方便,webpack则可以将具体的模块进行划分,需要哪个模块就加载哪个模块,实现按需加载,并且排除掉冗余代码,减少代码体积。

总结起来就是,gulp是基于流的自动化构建工具,但不包括模块化的功能,如果要用到的话,就需要引入外部文件,比如require.js等;而webpack是自动化模块打包工具,本身就具有模块化,并且也具有压缩合并的功能。二者侧重点不同,我认为相互结合使用会提高代码质量和代码的优化。

------------------------------------------------------------------------------

很难受,其实我也不清楚二者那个好那个坏,和个人使用习惯有关,和,也不知道写的对不对,请批评指正,我还是个小白。。。

时间: 2024-10-06 13:55:19

【简单理解】gulp和webpack的区别的相关文章

gulp和webpack的区别,是一种工具吗?

背景: 最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 基于此问: 我简单归结了一下区别和概念,让需要的同学阅读理解,从而不把时间浪费到这种模糊不清的选择问题上! --------------------------------------------------------------------------------------------------------------------------------

gulp与webpack的区别

常有人拿gulp与webpack来比较,知道这两个构建工具功能上有重叠的地方,可单用,也可一起用,但本质的区别就没有那么清晰. gulp gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并.雪碧图.启动server.版本控制等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程. PS:简单说就一个Task Runner webpack webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的

从Docker在Linux和Windows下的区别简单理解Docker的层次结构

上篇文章我们成功在Windows下安装了Docker,输出了一个简单的Hello World程序.本文中我们将利用Docker已有的云端镜像training/webapp来发布一个简单Python的Web程序,在浏览器中输出hello world. 本文内容的测试环境是Windows7下的Docker,用例基于官方文档用例.   一:从运行一个简单的Python Web程序说起 启动Docker客户端并登陆.在客户端中输入以下内容: $ sudo docker run -d -P trainin

Gulp和Webpack对比

在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中.前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到了 Webapp 模式.它们运行在现代的高级浏览器里,使用 HTML5. CSS3. ES6 等更新的技术来开发丰富的功能,网页已经不仅仅是完成浏览的基本需求,并且Webapp通常是一个单页面应用(SPA),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 JavaScri

[干货分享]git的简单理解及基础操作命令

前端小白一枚,最近开始使用git,于是花了2天看了廖雪峰的git教程(偏实践,对于学习git的基础操作很有帮助哦),也在看<git版本控制>这本书(偏理论,内容完善,很不错),针对所学内容建了git仓库测试,且写了不少git操作命令的笔记,做个分享,有错误的地方各位大大也给提出,好做修改~ Git是一款免费.开源的.用Linux内核开发的分布式版本控制系统. git和svn有什么区别呢? git采用分布式版本库管理,而svn采用集中式版本库管理. 集中式版本库管理需要有一台存放版本库的服务器,

Hadoop-- MapReduce简单理解

1.Hadoop和MapReduce概念 Mapreduce是一种模式. Hadoop是一种框架. Hadoop是一个实现了mapreduce模式的开源的分布式并行编程框架. 2.Hadoop框架 借助Hadoop 框架及云计算核心技术MapReduce 来实现数据的计算和存储,并且将HDFS 分布式文件系统和HBase 分布式数据库很好的融入到云计算框架中,从而实现云计算的分布式.并行计算和存储,并且得以实现很好的处理大规模数据的能力. 3.MapReduce 原理 3.1 map和reduc

我们为之奋斗过的C#-----C#的一个简单理解

我们首先来简单叙述一下什么是.NET,以及C#的一个简单理解和他们俩的一个区别. 1 .NET概述 .NET是Microsoft.NET的简称,是基于Windows平台的一种技术.它包含了能在.NET Framework平台运行的所有编程语言. 2 C#概述 他是专门为.NET平台设计的一种语言. 3 .NET与C#的区别 .NET是一种平台,这种平台可以编译多种语言例如:VB,J#,而C#只是一种语言. 4 IDE IDE全称(Itergrated Developer Environment)

[转]基于gulp和webpack的前端工程化

本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux Node.js 我们的需求 基于CommonJS模块化开发 基于React.js的组件化开发(JSX) 为保证组件的复用,css需要打包到js中 有国际化需求,静态文件需要部署在CDN上面 工程化工具的选择 gulp(基于stream的构建工具,与grunt相比,速度快且可编程) webpack(前

(转)Deep learning:四十二(Denoise Autoencoder简单理解)

前言: 当采用无监督的方法分层预训练深度网络的权值时,为了学习到较鲁棒的特征,可以在网络的可视层(即数据的输入层)引入随机噪声,这种方法称为Denoise Autoencoder(简称dAE),由Bengio在08年提出,见其文章Extracting and composing robust features with denoising autoencoders.使用dAE时,可以用被破坏的输入数据重构出原始的数据(指没被破坏的数据),所以它训练出来的特征会更鲁棒.本篇博文主要是根据Benig