一、概念

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去处理...

所以,Webpack中对资源文件的处理是通过入口文件产生的依赖形成的,不会像Gulp那样,配置好路径后,该路径下所有规定的文件都会受影响。

gulp和webpack的区别的更多相关文章

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

    疑问:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 它们的区别和概念 ------------------------------------ ...

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

    Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...

  3. gulp与webpack的区别

    gulp  gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并.雪碧图.启动server.版本控制等),然后定义执行顺序,来让gulp执行这 ...

  4. gulp与webpack的区别?是一种工具吗?

    问:gulp和webpack什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来?有什么区别? 答:gulp是工具链.自动化构建工具,可以配合各种插件,我们不用再做机械重复的工作 ...

  5. Webpack和Gulp,Webpack和Gulp的基本区别:

    Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...

  6. Gulp和Webpack对比

    在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中.前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到 ...

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

    本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...

  8. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  9. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

随机推荐

  1. SparkSql常用语句

    -连接sparksql: cd /home/mr/spark/bin ./beeline !connect jdbc:hive2://hostname:port --切换数据库 use databas ...

  2. word2vec模型评估方案

    1.word2vec参数详解 · sentences:可以是一个·ist,对于大语料集,建议使用BrownCorpus,Text8Corpus或·ineSentence构建.· sg: 用于设置训练算 ...

  3. 亲爱的,我是一条Linux运维技术学习路径呀。

    根据我的经验,人在年轻时,最头疼的一件事就是决定自己这一生要做什么.在这方面,我倒没有什么具体的建议:干什么都可以,但最好不要写小说,这是和我抢饭碗.总而言之,干什么都是好的:但要干出个样子来,这才是 ...

  4. 23-Python3 File

    ''' file(文件)方法 ''' #open()对象 pass #file对象 ##file.close():关闭文件,关闭后不能再进行读写操作 fo1 = open('/Users/ligaij ...

  5. 调试https接口

    1. wireshark的 pre master key只能使用在浏览器上,现在mac电脑不支持chrome,只有firefox才有SSL的日志提供给wireshark. 2. wirshark不能解 ...

  6. js抽红包分配

    将 50000元随机分给10个人,其中3个人必须分到百位数,4个人分到千位数,3个人分到万位数,每个人所得金额 <!DOCTYPE html> <html lang="zh ...

  7. VS 应用模板 所交税和实发工资的运算

    double SFGZ, SL, SSKCS, YFGZ,a,YJS; //应发工资(基本工资),税率,速算扣除数,应发工资,判断标准,交多少税 //double QZD = 3500;//起征点 无 ...

  8. 深入解析Java反射(1) - 基础

    深入解析Java反射(1) - 基础 最近正筹备Samsara框架的开发,而其中的IOC部分非常依靠反射,因此趁这个机会来总结一下关于Java反射的一些知识.本篇为基本篇,基于JDK 1.8. 一.回 ...

  9. Yii2 Restful api分页

  10. sitecore系列教程之Sitecore个性化-配置文件,模式和角色

    这是利用Sitecore规则引擎实现数字化转换的三部分系列的第二部分.阅读上一篇文章,通过为您的个性化体验定义内容策略来设置基础.   Sitecore有一个非常强大的规则引擎,可以帮助推动个性化的用 ...