gulp和webpack的区别
一、概念
gulp 构建工具 我们可以通过给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程。
webpack 打包工具 我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块,Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。
Gulp是对整个过程进行控制,所以在其配置文件(gulpfile.js)中配置的每一个task对项目中该task配置路径下所有的资源都可以管理。
gulp.task('sass',function(){
gulp.src('src/styles/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./build/prd/styles/'));//编译后的输出路径
});
上面这个task可以对'src/styles/*.scss'
目录下的所有以.scss
结尾的文件进行预处理。
Webpack则不是这样管理资源的,它是根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源(如下图)。通俗的说,Webpack就是需要通过其配置文件(webpack.config.js)中entry
配置的一个入口文件(JS文件),如下图
entry: {
app:__dirname + "/src/scripts/app.js",
}
//引入scss文件
import '../style/app.scss'; //引入依赖模块
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());
解析过程中,发现一个app.scss
文件,然后根据webpack.config.js
配置文件中的module.loaders
属性去查找处理.scss
文件的loader进行处理,处理app.scss
文件过程中,如果发现该文件还有其他依赖文件,则继续处理app.scss
文件的依赖文件,直至处理完成该“链路”上的依赖文件,然后又遇到一个Greeter.js
模块,于是像之前一样继续去查找对应的loader去处理...
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和webpack什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来?有什么区别? 答:gulp是工具链.自动化构建工具,可以配合各种插件,我们不用再做机械重复的工作 ...
- Webpack和Gulp,Webpack和Gulp的基本区别:
Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...
- Gulp和Webpack对比
在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中.前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到 ...
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
随机推荐
- SparkSql常用语句
-连接sparksql: cd /home/mr/spark/bin ./beeline !connect jdbc:hive2://hostname:port --切换数据库 use databas ...
- word2vec模型评估方案
1.word2vec参数详解 · sentences:可以是一个·ist,对于大语料集,建议使用BrownCorpus,Text8Corpus或·ineSentence构建.· sg: 用于设置训练算 ...
- 亲爱的,我是一条Linux运维技术学习路径呀。
根据我的经验,人在年轻时,最头疼的一件事就是决定自己这一生要做什么.在这方面,我倒没有什么具体的建议:干什么都可以,但最好不要写小说,这是和我抢饭碗.总而言之,干什么都是好的:但要干出个样子来,这才是 ...
- 23-Python3 File
''' file(文件)方法 ''' #open()对象 pass #file对象 ##file.close():关闭文件,关闭后不能再进行读写操作 fo1 = open('/Users/ligaij ...
- 调试https接口
1. wireshark的 pre master key只能使用在浏览器上,现在mac电脑不支持chrome,只有firefox才有SSL的日志提供给wireshark. 2. wirshark不能解 ...
- js抽红包分配
将 50000元随机分给10个人,其中3个人必须分到百位数,4个人分到千位数,3个人分到万位数,每个人所得金额 <!DOCTYPE html> <html lang="zh ...
- VS 应用模板 所交税和实发工资的运算
double SFGZ, SL, SSKCS, YFGZ,a,YJS; //应发工资(基本工资),税率,速算扣除数,应发工资,判断标准,交多少税 //double QZD = 3500;//起征点 无 ...
- 深入解析Java反射(1) - 基础
深入解析Java反射(1) - 基础 最近正筹备Samsara框架的开发,而其中的IOC部分非常依靠反射,因此趁这个机会来总结一下关于Java反射的一些知识.本篇为基本篇,基于JDK 1.8. 一.回 ...
- Yii2 Restful api分页
- sitecore系列教程之Sitecore个性化-配置文件,模式和角色
这是利用Sitecore规则引擎实现数字化转换的三部分系列的第二部分.阅读上一篇文章,通过为您的个性化体验定义内容策略来设置基础. Sitecore有一个非常强大的规则引擎,可以帮助推动个性化的用 ...