gulp与webpack的区别?是一种工具吗?
问:gulp和webpack什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来?有什么区别?
答:gulp是工具链、自动化构建工具,可以配合各种插件,我们不用再做机械重复的工作,替代手工实现自动化工作。
完成 js压缩,css压缩,less编译 ,检查语法 , 自动刷新页面。
1.构建工具 2.自动化 3.提高效率用
webpack是文件打包工具,可以把项目的各种js文件、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案。
1.打包工具 2.模块化识别 3.编译模块代码方案用
所以定义和用法上来说 都不是一种东西,无可比性,更不冲突!【当然,也有相似的功能,比如合并,区分,但各有各的优势】
释:Gulp应该和Grunt比较,区别就不说了,说说用处吧。
Gulp / Grunt 是一种工具,能够优化前端工作流程。
比如自动刷新页面、combo、压缩css、js、自动编译less、sass为css等等。
简单来说,就是使用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的插件。
参考文献:
http://blog.csdn.net/xllily_11/article/details/51782005
gulp与webpack的区别?是一种工具吗?的更多相关文章
- Gulp和webpack的区别,是一种工具吗?
疑问:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 它们的区别和概念 ------------------------------------ ...
- 【简单理解】gulp和webpack的区别
Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...
- gulp与webpack的区别
gulp gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并.雪碧图.启动server.版本控制等),然后定义执行顺序,来让gulp执行这 ...
- gulp和webpack的区别
一.概念 gulp 构建工具 我们可以通过给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server.sass/less预编译.文件的合并压缩等等)来让gulp ...
- Gulp和Webpack工具的区别
引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Gr ...
- gulp/grunt和browserify/webpack的区别
Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...
- Webpack和Gulp,Webpack和Gulp的基本区别:
Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
随机推荐
- React / Ant Design Pro 实现Canvas画布实时自适应
如何实现canvas根据父容器进行自适应? Ant Design的组件都提供了强大的自适应能力,为了对齐父组件,镶嵌在Ant Design组件里的canvas也需要能根据父级容器进行自适应的能力,页面 ...
- (HK1-1)海康网络摄像机的使用
https://blog.csdn.net/u014552102/article/details/86700057 一.手机客户端操作: 首先在莹石商城官网https://www.ys7.com/下 ...
- webpack中路径的理解
webpack 前端打包工具, 开发人员要面对的路径主要是: 打包前的路径(开发环境路径)和打包后的路径(生产环境路径) 在webpack.config.js中配置的output.path, outp ...
- Java——判断回文
package basic; import java.util.Scanner; public class Palindrome{ public static boolean isPalindrome ...
- map和object互转的几种方式
1.使用Apache中的BeanUtils类,导入commons-beanutils包. 2.使用JSON 3.利用java.lang.reflect.Field类完成Obj和Map之间的相互转换 h ...
- 4.28(TG模拟赛)总结
1.挖地雷 题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N≤20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任 ...
- C函数之genv
函数原型: include<stdlib.h> char *getenv(char *envvar); 函数说明: getenv()用来取得参数envvar环境变量的内容.参数envvar ...
- keepalived 配置文件解析
! Configuration File for keepalived global_defs { #全局定义部分 notification_email { #设置报警邮件地址,可设置多个 acass ...
- vue+element 表格筛选
筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...
- varnish搭建cdn网络-------3.0.5版本
CDN分发网络CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在 ...