一 概念介绍

gulp 是 task runner,Webpack 是 module bundler。可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和对方不重叠的。

1 什么是gulp

Gulp就像是一个产品的流水线,整个产品从无到有,都要受流水线的控制,在流水线上我们可以对产品进行管理

1.1 gulp的核心功能:

  1. 任务定义和组织;
  2. 基于文件 stream 的构建;
  3. 插件体系;

gulp适用于任何JavaScript的场合,就类似一个大的管理框架,其中的任务,与任务需要的工具都要手动去编写与引入,对整体的一个把控

2 什么是webpack

Webpack类似于一个模块打包机 可以将许多松散的模块按照依赖规则打包成符合生产环境部署的前端资源。体现出的意义就是:一切皆模块 通过 loader的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

2.1 webpack的核心功能

  1. 按照模块的依赖构建目标文件;
  2. loader 体系支持不同的模块;
  3. 插件体系提供更多额外的功能;

二 Gulp和Webpack功能实现对比

主要从以下方面对两种框架做一下对比

1 概念上

Gulp侧重于前端开发的整个过程的控制管理(像是流水线),我们可以通过给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程。

Webpack有人也称之为模块打包机,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块,最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。

另外我们知道Gulp是对整个过程进行控制,所以在其配置文件(gulpfile.js)中配置的每一个task对项目中该task配置路径下所有的资源都可以管理。
比如,对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理:

gulp.task('sass',function(){
gulp.src('src/styles/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./build/prd/styles/'));//编译后的输出路径
});

Webpack则不是这样管理资源的,它是根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源(如下图)。

  1. 需要把各种资源(js/ts/css/html/ejs/img/fonts等等)都看成 module;
  2. module之间必须是互相依赖的,在 js 里 import 模板、图片、样式文件等等,样式文件通过 url()和图片字体关联;这种依赖关系必须是 webpack 既定的或者是通过插件可以理解的关系。

Webpack 的核心就是模块化地组织,模块化地依赖,然后模块化地打包。相对来上,场景局限在前端模块化打包上;虽然用 gulp + 插件的方式也能实现,但目前看 Webpack 在依赖的模块化构建上是无人能够替代的。

通俗的说,Webpack就是需要通过其配置文件(webpack.config.js)中entry配置的一个入口文件(JS文件)

 entry: {
app:__dirname + "/src/scripts/app.js",
}

然后Webpack进入该app.js文件进行解析,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那样,配置好路径后,该路径下所有规定的文件都会受影响。


2 模块化开发

概念:其实就是利用CommonJS、AMD、CMD等方式对静态资源文件进行引入管理,然后最终发布时达成相应的模块依赖包,就是为了将代码进行解耦合
先来看下gulp

Gulp
|——dist: 项目输出路径
| |——module: 开发模块(遵循就近依赖原则)
| |——index: 首页模块
| |——my: 我的模块
|——commons: 公用静态文件
|——src: 工作目录
| |——module: 开发模块(遵循就近依赖原则)
| |——index: 首页模块
| |——action_.js: 开发js(es6语法)
| |——**.scss: sass模板语言
| |——vue**.js: vue模板
| |——my: 我的模块
|——gulpfile.js: gulp的配置文件
|——index.html: 主页html文件
|——package.json: npm包管理配置文件

然后通过编写task命令对 文件进行css转译,js压缩/转译,img,html压缩等等操作


webpack目录

主要对entry入口文件中所有的依赖以及后续依赖进行分析,对公共文件进行抽取分离压缩打包

3 开发过程中的依赖导入

gulp中大部分静态文件都是已经标签化插入好的(如果js文件中使用import和require的es6语法,打包还要另外加入插件plugin和browserify,与其这样像webpack靠拢不如直接拿来webpack配置各司其职,相互配合,这也是一种gulp+webpack的模式)
webpack 可以随用随插,按需加载(gulp中目前我使用的是require--采用强依赖模式已经把需要的模块提前注入好了)和打包
所以就方便程度和学习成本来说,webpack更胜一筹

4 进行可视化打包分析

gulp还没尝试过,不知道相关插件能否做到,不过webpack由于社区比较活跃,对应的可视化分析插件很多,其中一个就是

npm install --save-dev webpack-bundle-analyzer
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// ...
plugins: [new BundleAnalyzerPlugin()]
// ...

npm链接地址

运行后生成的相关图形化分析张这样,相当全面的显示了各个包的情况,简直不能太屌

其中相关引用:
链接描述
链接描述

前端架构gulp与webpack(知识点整理)的更多相关文章

  1. webpack知识点整理

    作用域 es6里模块化的写法 会存在的问题,变量.方法名字雷同,外部文件调用的时候出现问题 如 a.js里 var a='susan' b.js里 var a='jack' 问题解决方案,添加包裹 a ...

  2. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

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

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

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

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

  5. 【前端自动化构建 grunt、gulp、webpack】

    参考资料: 用自动化构建工具增强你的工作流程!:http://www.gulpjs.com.cn/ gulp详细入门教程:http://www.ydcss.com/ JavaScript构建(编绎)系 ...

  6. 三年从前端小工到架构-知乎 Live 学习整理

    最近在知乎上学习了vczero (王利华,簋谣)的知乎Live「三年从前端小工到架构」,感觉受益匪浅,现将本次Live学习笔记记录如下. 本次 Live 主要包括以下内容   • 0-3 年的前端工程 ...

  7. 前端架构师亲述:前端工程师成长之路的 N 问 及 回答

    问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ...

  8. 前端leader找我谈心:我是如何从刚毕业的前端菜鸟一步步成长为前端架构师的?

    谈谈学习 我做前端已经有五年的时间了,从大学刚毕业的时候,我是一个完全什么都不懂的小白.虽然我大学里学的是软件工程专业,但是因为在大学里荒废学业,每天只知道打游戏,基本上到大学毕业之前我是什么都不会的 ...

  9. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

随机推荐

  1. c# 自定义控件-提示框(弹框)

    分带取消按钮和不带取消按钮的 调用方法: frmMessageBox frm = new frmMessageBox("提示", "数据连接失败,请重试!", ...

  2. anaconda及jupyter notebook的了解及使用方法(1)

    今日内容 anaconda软件使用 jupyter notebook基本使用及快捷键 numpy anaconda软件使用 1.进入anaconda主页点击jupyter启动即可 呼起一个jupyte ...

  3. Java 类方法和类变量

    目录 一.类变量 1.如果定义类变量 2.如何访问类变量 3.类变量的使用注意事项和细节 二.类方法 1.类方法的形式 2.类方法的调用 3.类方法经典使用场景 4.类变量和类方法 三.main方法 ...

  4. JZ-042-和为 S 的两个数字

    和为 S 的两个数字 题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 返回值描述: 对应每个测试案例,输出两 ...

  5. JavaScript面向对象—继承的实现

    JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...

  6. 舒服,给Spring贡献一波源码。

    你好呀,我是歪歪. 这周我在 Spring 的 github 上闲逛的时候,一个 issues 引起了我的兴趣. 这篇文章,是我顺着这个 issues 往下写,始于它,但是不止于它: https:// ...

  7. Python 基于 selenium 实现不同商城的商品价格差异分析系统

    1. 前言 selenium 原本是一款自动化测试工具,因其出色的页面数据解析和用户行为模拟能力而常用于爬虫程序中,致使爬虫程序的爬取过程更简单.快捷. 爬虫程序与其它类型程序相比较,本质一样,为数据 ...

  8. redis规范(实用)

    redis功能强大,数据类型丰富,再快的系统,也经不住疯狂的滥用.通过禁用部分高风险功能,并挂上开发的枷锁,业务更能够以简洁.通用的思想去考虑问题,而不是绑定在某种实现上. Redis 根据不同的用途 ...

  9. centOS 7 离线安装 MySQL 5.6 完美安装

    centOS 7 离线安装 MySQL 5.6 centOS 7 离线安装 MySQL 5.6 准备环境 1.离线 centOS 7(此处为 centOS 7 最小安装) 2.nginx 安装文件 ( ...

  10. CodeUp Problem D: More is better

    根据题目意思,输入的每一对A.B都是直接朋友,并且最后只会得到一个集合,该集合就是Mr Wang选择的男孩. 因此很容易写出代码,甚至不需要自己构建一个并查集,只需要使用C++的set模板,每次读入一 ...