webpack工程化高级课程_自动化工具gulp.pdf

自动化工具gulp

王红元coderwhy

目录

1gulp和webpack

content

2编写gulp的任务

3gulp的任务组合

4gulp的文件操作

5gulp的案例演练

6gulp开发和构建

coderwhy什么是Gulp？

◼什么是Gulp？

Atoolkittoautomateenhanceyourworkflow；

一个工具包，可以帮你自动化和增加你的工作流；

coderwhyGulp和Webpack

◼gulp的核心理念是taskrunner

可以定义自己的一系列任务，等待任务被执行；

基于文件Stream的构建流；

我们可以使用gulp的插件体系来完成某些任务；

◼webpack的核心理念是modulebundler

webpack是一个模块化的打包工具；

可以使用各种各样的loader来加载不同的模块；

可以使用各种各样的插件在webpack打包的生命周期完成其他的任务；

◼gulp相对于webpack的优缺点：

gulp相对于webpack思想更加的简单、易用，更适合编写一些自动化的任务；

但是目前对于大型项目（Vue、React、Angular）并不会使用gulp来构建，比如默认gulp是不支持模块化的；

coderwhyGulp的基本使用

◼首先，我们需要安装gulp：

#全局安装

npminstallgulp-g

#局部安装

npminstallgulp

◼其次，编写gulpfile.js文件，在其中创建一个任务：

◼最后，执行gulp命令：

npxgulpfoo

coderwhy创建gulp任务

◼每个gulp任务都是一个异步的JavaScript函数：

此函数可以接受一个callback作为参数，调用callback函数那么任务会结束；

或者是一个返回stream、promise、eventemitter、childprocess或observable类型的函数；

◼任务可以是public或者private类型的：

公开任务（Publictasks）从gulpfile中被导出（export），可以通过gulp命令直接调用；

私有任务（Privatetasks）被设计为在内部使用，通常作为series()或parallel()组合的组成部分；

◼补充：gulp4之前,注册任务时通过gulp.task的方式进行注册的

coderwhy默认任务

◼我们可以编写一个默认任务：

◼执行gulp命令：

npxgulp

coderwhy任务组合series和parallel

◼通常一个函数中能完成的任务是有限的（放到一个函数中也不方便代码的维护），所以我们会将任务进行组合。

◼gulp提供了两个强大的组合方法：

series()：串行任务组合；

parallel()：并行任务组合；

coderwhy读取和写入文件

◼gulp暴露了src()和dest()方法用于处理计算机上存放的文件。

src()接受参数，并从文件系统中读取文件然后生成一个Node流（Stream），它将所有匹配的文件读取到内存中并通过流

（Stream）进行处理；

由src()产生的流（stream）应当从任务（task函数）中