当前位置：首页 > news >正文

gulp简单使用

news 2025/6/27 7:57:54

gulp

gulp的核心理念是task runner
可以定义自己的一系列任务等待任务被执行
基于文件stream的构建流
我们可以使用gulp的插件体系来完成某些任务

webpack的核心理念是module bundler
webpack是一个模块化的打包工具
可以使用各种各样的loader来加载不同的模块
可以使用各种各样的插件在webpack打包的生命周期完成其他的任务

glup相对于webpack的优缺点
gulp相对于webpack思想更加简单易用更适合编写一些自动化的任务
但是目前对于大型项目不会使用gulp来构建默认gulp是不支持模块化的

gulp简单使用

pnpm add gulp

创建gulpfile.js

//编写简单任务
const foo = (cb) => {console.log("第一个gulp任务");cb();
};module.exports = {foo,
};

使用npx gulp foo运行

每个gul跑任务是一个异步的javascript函数
此函数可以接收一个callback作为参数调用callback函数那么任务会结束
或者返回一个stream、promise、event emitter、child process或observable类型的函数

任务可以是public或者private类型的
公开任务从gulpfile中被导出可以通过gulp命令直接调用
私有任务被设计为在内部使用通常作为series()或parallel()组合的组成部分

默认任务

module.exports.default = (cb) => {console.log("default task");cb();
};

执行npx gulp

任务组合series和parallel

通常一个函数中能完成的任务是有限的（放到一个函数中也不方便代码的维护）所以我们会将任务进行组合
gulp提供了两个强大的组合方法
series():串行任务组合
parallel():并行任务组合

const { series, parallel } = require("gulp");const task1 = (done) => {setTimeout(() => {console.log("task1 working");done();}, 1000);
};
const task2 = (done) => {setTimeout(() => {console.log("task2 working");done();}, 2000);
};
const task3 = (done) => {setTimeout(() => {console.log("task3 working");done();}, 3000);
};exports.foo = series(task1, task2, task3);exports.bar = parallel(task1, task2, task3);

读取和写入文件

gulp暴露了src()和dest()方法用于处理计算机上存放的文件
src()接收参数并从文件系统中读取文件返回生成一个Node流（Stream）它将所有匹配的文件读取到内存中并通过流（Stream）进行处理
由src()产生的流（stream）应当从任务（task函数）中返回并发出异步完成的引号
dest()接收一个输出目录作为参数并且它还会产生一个Node流（stream）通过该流将内容输出到文件中

const { src, dest } = require("gulp");const copyFile = () => {//1.读取文件return src('./src/main.js').pipe(dest('./dest'))
};module.exports = {copyFile,
};