记录一下gulp和webpack的区别

最新推荐文章于 2024-07-31 14:35:30 发布
最新推荐文章于 2024-07-31 14:35:30 发布
阅读量202 收藏 1
点赞数
分类专栏： 随笔记录 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milkgan/article/details/107351269
版权

记录一下gulp和webpack的区别

gulp

1.构建化工具（可执行程序自动化）
2.像流水管道一样，一次性输入，一次性输出

webpack

1.打包工具
2.文件模块化

总结

gulp侧重于过程控制，通过配不同的task来实现功能，通过压缩合并资源去实现功能；
webpack侧重于模块化打包，将文件模块化，打包成支持的文件。

milkgan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一杯茶的时间，带你区分gulp和webpack
快跑啊小卢的博客
09-26 2871
前言☀️ 对于刚毕业踏入社会的小白前端，在习惯了Vue脚手架完成业务功能后自带的webpack打包后对于打包的印象基本上就只有一个:npm run build 但是往往我们看招聘信息上面都有这么一行 有使用Gulp、Webpack等项目自动工程化经验者优先 这时候我们就去找两者的区别，听网上简单的描述就是 这两❓干的事情都一样呀不都是优化性能吗❓ 说到自动化，也就是我们经常说的前端构建工具，因为构建工具就是用来让我们不做机械重复的事情，解放我们的双手，但其实gulp和webpack的定位不同，没有什么可比
前端构建工具Grunt&Gulp&webpack笔记
LiuKairui的博客
01-17 690
包含了前端主要构建工具,主讲:尚硅谷{'张晓飞','熊键'},视频来自B站:{'BV18s411E7gQ', 'BV18s411E7T5', 'BV1e7411j7T5'}
npm & gulp & webpack 基础
qq_36291747的博客
04-20 300
npm & gulp & webpack 基础 一、npm 1. 基础概念 管理依赖包的一个工具。 npm 由三个独立的部分组成： 网站 注册表（registry） 命令行工具 (CLI) 2. 创建 package.json 文件的两种方式 npm init 用这种方式来创建 package.json 文件，在生成这个文件的过程中，需要自己根据命令行的提示，输入要求的...
理解 Gulp 和 Webpack(转)
weixin_30386713的博客
05-09 73
Gulp 和 webpack 之间的关系是十分暧昧的，却也经常被人误解，以为它俩是竞争关系，其实不然。 Gulp 是一个任务管理工具，让简单的任务更清晰，让复杂的任务易于掌控；而 webpack 的理念是，一切皆为模块，每个模块在打包的时候都会经过一个叫做 loader 的东西，它具备非常强大的精细化管理能力，主要解决的是依赖分析问题。 Gulp 的学习，搞清楚gulp.src,gul...
Gulp & webpack 配置详解
仗剑天涯，从摘要开始
11-02 275
1. Gulp VS webpack 比较 Gulp 是一个任务管理工具，让简单的任务更清晰，让复杂的任务易于掌控；而 webpack 的理念是，一切皆为模块，每个模块在打包的时候都会经过一个叫做 loader 的东西，它具备非常强大的精细化管理能力，主要解决的是依赖分析问题。 Gulp：搞清楚 gulp.src, gulp.dest, gulp.task, gulp.watch 四个 API...
记录一次前端环境搭建 node+gulp
Yes_water的博客
05-09 216
公司的老项目了，用到的是gulp+node，要在本地调试前端，搭建一下环境，踩了老多坑了~
面试 之 webpack、gulp 及 前端工程化
qq_34425377的博客
03-25 304
目录： 一、gulp、webpack对比总结 二、前端工程化简介 前言：经验不足，仅记录下当前自己的认识，非常希望可以得到反馈，无论是指点还是提出问题，一起讨论成长。 一、gulp、webpack对比总结： 这两者正巧都可以完成打包的功能，经常拿来作比较罢了。分析对比过程中，越比较越觉得就只能探讨打包形式及过程中用的包，根本没得好比的嘛，还是总结下：建议webpack常用，gulp辅助小流程工具。还是分别讲解大致讲解下吧： 打包编译的过程，都有绕不开的共同问题：mode开发模式、mainfest文件映射关系
webpack学习记录
fangqi20170515的博客
08-08 317
Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。我们将 Webpack 输出的文件叫做bundle。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。........................
用gulp+webpack构建多页应用——记一次Node多页应用的构建过程
weixin_30340745的博客
12-04 145
通过参考网上的一些构建方法，当然也在开发过程中进行了一番实践，最终搭建了一套适用于当前多页应用的构建方案，当然该方案还处于draft版本，会在后续的演进过程中不断的优化。 个人觉得该方案的演进过程相对于成果而言更值得记录。但在此之前，我们先简单介绍下项目的整体架构，这样大家会更明白为什么要采用这样的构建方式。下图列出了用户在浏览器中输入url到页面ready的过程，可以看出这是一个典型的服务端直...
webpack-gulp-logger:gulp 的 webpack 记录器
05-29
npm install --save webpack-gulp-logger 用法 var gulp = require ( 'gulp' ) ; var webpackConfig = require ( './webpack.config' ) ; var webpackLogger = require ( 'webpack-gulp-logger' ) ; gulp . task ...
gulp-webpack-new
03-27
"gulp-webpack-new-master" 可能包含一个典型的项目结构，比如 `src` 目录存放源代码，`dist` 或 `build` 目录存放编译后的文件，`.gitignore` 文件忽略不必要的文件，`package.json` 文件记录项目依赖和脚本命令。...
毕业设计，旅游旅游网站，基于gulp-webpack,react,react-router,redux.zip
08-04
这个项目利用了 gulp、webpack、React、react-router 和 redux 这些工具和技术。下面将详细解释这些技术在Web开发中的作用及其重要性。 1. **gulp**: Gulp 是一个自动化任务管理器，用于构建流程。它允许开发者通过...
rails-react-webpack-template:带有React前端的Rails样板，带有gulp，webpack和babel
05-17
该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容： Ruby版本 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务（作业队列，缓存服务器，搜索引擎等） 部署说明 … 如果...
angular-es6-sample：带有ECMAScript 2015ES6，Bootstrap 4和Webpack的AngularJS 1.5+示例
02-03
1. `package.json`：记录项目依赖和脚本，用于npm（Node.js包管理器）管理。 2. `src` 目录：源代码存放的地方，可能包含`app`（应用代码）、`components`（组件）、`services`（服务）等子目录。 3. `index.html`：...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 938
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 506
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】九、框架
最新发布
weixin_49015558的博客
07-31 318
1 Vue2 实现方式 2 Vue3 实现方式 3 React 实现方式 4 Angular 实现方式
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 471
对于上云api开发学习过程中的错误教训积累总结
gulp和webpack的区别
06-07
Gulp 和 Webpack 都是前端自动化构建工具，但它们的设计思路和使用方式有所不同。 Gulp 是一个基于流的自动化构建工具，它通过将任务（task）拆分成一个一个的小插件（plugin），再将这些插件组合起来构建出一个完整的自动化构建流程。Gulp 的特点是比较简单，易于上手，适合处理一些简单的任务，如文件压缩、合并、重命名等。 Webpack 是一个模块化打包工具，它可以将各种类型的文件（js、css、图片等）视为模块，通过 loader 将这些模块转换成适合浏览器端使用的代码，再通过 plugin 对打包过程进行优化和扩展。Webpack 的特点是更加灵活，适合处理复杂的前端项目，如多页应用、单页应用等。 总体来说，Gulp 更加注重流程的可读性和易用性，而 Webpack 更加注重模块化的管理和打包性能。选择哪个工具，主要取决于项目的规模和需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值