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

原创 2016年06月29日 12:19:35

背景: 最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来?

基于此问: 我简单归结了一下区别和概念,让需要的同学阅读理解,从而不把时间浪费到这种模糊不清的选择问题上!

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

gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作

1.构建工具

2.自动化

3.提高效率用

webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案

1.打包工具

2.模块化识别

3.编译模块代码方案用

所以定义和用法上来说 都不是一种东西,无可比性 ,更不冲突!【当然,也有相似的功能,比如合并,区分,但各有各的优势】

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

Gulp:解释图【纯原创】转载请注明出处



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

Webpack:解释图【来自网络和官网】


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


基于此问: 来自知乎的一篇回答!够白话文了:

怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事

Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Grunt 是一种工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

  • seajs / require : 是一种在线"编译" 模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

  • browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。这样就知道,Gulp是一个工具,而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

不知道这样够清楚了么?

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

入坑方式:   欢迎加入~!气氛热情,欢乐多,妹子多!

enlightenedweb前端 聚集地,汇聚了全国顶尖的web前端热爱者,最新技术,最炫潮流,最靠谱的话题:
  做好现在!技术只是为了改变生活!JS前端实用开发QQ群 :
147250970
Web前端HTML5/JS交流群

enlightened 扫描屏幕下方的二维码,可以关注 我的前端公众号 。听说妹子挺多的,及时更新一些前端解惑和段子



版权声明:本文已在我的公众号 :前端你别闹(ID: webunao) 原创首发,转载请务必注明出处!,JS前端实用开发QQ群 :147250970 欢迎加入~!

gulp+webpack配置

gulp+webpack配置 首先介绍一下gulp和webpack gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在...
  • sinat_17775997
  • sinat_17775997
  • 2016年10月07日 11:18
  • 1953

gulp+webpack工具整合简介

webpack简介Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块依赖的方...
  • xiangzhihong8
  • xiangzhihong8
  • 2017年01月03日 14:08
  • 7100

webpack和gulp使用总结

什么是前端工程化?随着前端行业的发展,现在的前端越来越像一个大工程,从几年前前端的webPage模式(写写单页面,jquery,使用几个插件网页就建成),到现在的webapp模式(一个完整的app软件...
  • qq_33050575
  • qq_33050575
  • 2017年04月17日 11:44
  • 867

前端集成解决方案(webpack、gulp)

前端集成解决方案 前端集成解决方案 一、什么是前端集成解决方案 FIS(Front-end Integrated Solution)是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码...
  • linyeban
  • linyeban
  • 2017年01月10日 23:46
  • 3365

基于gulp+webpack的"约定大于配置"的构建方案探讨

这不到半年的时间,玩了很多东西。有些觉得不错的新技术,直接拿到公司的项目里去挖坑。感觉进步很大,但是看看工程,啥都有。单看模块管理,从遗留的requirejs,到我过来改用的browserify,以及...
  • kaosini
  • kaosini
  • 2015年11月10日 11:47
  • 1196

webpack和gulp结合使用

webpack和gulp的区别gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作1.构建工具2.自动化3.提高效率用 Webpack 是当下最热...
  • YIDBoy
  • YIDBoy
  • 2017年12月07日 16:09
  • 162

Gulp+webpack模板化开发演练(1):分离公共头文件

分离html模板,抽取公共的模板 需要安装插件 这是一个webpack加载器,可以把文件原样返回字符串npm install raw-loader --save-dev示例代码 var head...
  • github_26672553
  • github_26672553
  • 2016年08月23日 22:24
  • 1219

webpack gulp 实现完整前端工程化

作者:陈学家 链接:https://zhuanlan.zhihu.com/p/21312474 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 在前面的两个小节中已...
  • java_goodstudy
  • java_goodstudy
  • 2016年10月12日 14:58
  • 1819

gulp+webpack+angular1的一点小经验(第一部分gulp与webpack的整合)

时间匆匆如流水继上周熟悉了gulp的初步安装与环境配置以后,我的项目又进入了新的阶段!   这篇文章将把我这一周遇到的一些问题,以及解决的方式做一个小小的总结,不一定记的完整,但都是个人的一点经验,...
  • sisierda
  • sisierda
  • 2016年12月06日 15:55
  • 2182

Gulp配合Webpack的时候,如何让Webpack生成生产环境代码

Gulp配合Webpack使用时,需要Webpack生成生成环境代码。原来只用Webpack的时候,可以只输入命名 webpack -p Xxx.js即可。但是现在使用了Gulp,需要在gulpfi...
  • zhangchao19890805
  • zhangchao19890805
  • 2016年08月09日 15:33
  • 3535
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Gulp和webpack的区别,是一种工具吗?
举报原因:
原因补充:

(最多只允许输入30个字)