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,
};
流(stream)所提供的主要的API是.pipe()方法 pipe方法的原理是什么呢?
pipe方法接收一个转换流或可写流