浅谈前端项目打包工具webpack和gulp

webpack：一个模块打包工具（更适合单页面spa模块开发）

Webpack更侧重于模块打包，把开发中的所有资源（图片、js文件、css文件等）看成模块。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的

gulp：基于流格式的打包构建工具（更适合多页面模块mpa开发）

gulp：前端自动化打包构建工具，基于流格式的打包构建工具
打包:把文件压缩,整合,移动,混淆

流格式：从头到尾的过程，从源开始一步一步加工，每一个步骤需要依赖上一步的结果，最终得到最后结果
环境有求：依赖于node环境进行开发，底层封装的内容就是node的读写文件

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

gulp的常见api：gulp.src()、gulp.dest()、gulp.task()、gulp.watch()、gulp.series()、gulp.parallel()

gulp.src()方法：创建一个流，用于从文件系统读取 Vinyl 对象。

语法：gulp.src(globs, [options])

globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
options为一个可选的参数对象，通常我们不需要用到

注：BOMs(字节顺序标记)在 UTF-8 中没有任何作用，除非使用 removeBOM 选项禁用，否则 src() 将从读取的 UTF-8 文件中删除BOMs。

gulp.dest()方法：创建一个用于将 Vinyl 对象写入到文件系统的流。

语法：gulp.dest(path[,options])

path为写入文件的路径
options为一个可选的参数对象，通常我们不需要用到

要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。
gulp的使用流程一般是这样子的：

首先通过gulp.src()方法获取到我们想要处理的文件流
然后把文件流通过pipe方法导入到gulp的插件中
最后把经过插件处理后的流再通过 pipe 方法导入到gulp.dest()中
gulp.dest()方法则把流中的内容写入到文件中

注：我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名

gulp.task方法：用来定义任务

语法：gulp.task(name[, deps], fn)

name为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

当依赖是异步任务时的处理：想等待异步任务中的异步操作完成后再执行后续的任务，有三种方法
在异步操作完成后执行一个回调函数来通知 gulp 这个异步任务已经完成,这个回调函数就是任务函数的第一个参数
定义任务时返回一个流对象。适用于任务就是操作 gulp.src 获取到的流的情况
返回一个 promise 对象

gulp.watch方法：用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。

语法1：gulp.watch(glob[, opts], tasks)

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组

语法2：gulp.watch(glob[, opts, cb])

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同
opts 为一个可选的配置对象，通常不需要用到
cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径

gulp.series方法：将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行。

对于使用 series() 和 parallel() 组合操作的嵌套深度没有强制限制
语法1：gulp.series(…tasks)

tasks任意数量的任务函数都可以作为单独的参数传递。如果您以前注册过任务，可以使用字符串，但不建议这样做。

gulp.parallel方法：将任务功能和/或组合操作组合成同时执行的较大操作。

对于使用 series() 和 parallel() 进行嵌套组合的深度没有强制限制。
语法1：gulp.parallel(…tasks)

tasks任意数量的任务函数都可以作为单独的参数传递。如果您以前注册过任务，可以使用字符串，但不建议这样做。

更多gulp api详情请参考链接：gulp的API介绍

webpack和glup对比图

参考文章链接：下图来源