Gulp入门

359 阅读2分钟

Gulp是什么

Gulp是一个基于node.js的前端构建工具,用于简化基于流的构建任务, 比如对文件的拷贝,压缩,合并,编译等处理;

Gulp基本使用

安装工具

  1. 安装Gulp命令行工具gulp-cli,可以在命令行中使用gulp命令
sudo npm install --global gulp-cli

2. 在项目中使用Gulp作为开发依赖;

npm install --save-dev gulp

项目中使用

  1. 新建项目,初始化package, 并且安装Gulp作为开发依赖
mkdir my-project;
npm init
npm install --save-dev gulp
touch gulpfile.js

2. 执行完以上操作就可以新建一个demo工程,来实践gulp的基本使用 3. gulpfile.js文件是在运行gulp命令的时候会被自动加载,里面描述了各个任务的创建和执行流程;

gulpfile.js文件

创建任务

任务是定义构建内容需要完成的操作,比如需要拷贝文件,压缩文件,打包文件,编译文件,都可以抽象成事一个个任务执行,比如定义一个复制的任务;

// 定义一个copy任务,将src目录下文件复制到dist目录;
const gulp = require('gulp');
gulp.task('copy', () => {
    return gulp.src('src/**/*')
        .pipe(gulp.dest('dist'))
})

执行任务

执行该任务以后,dist目录下有了复制的文件;

可以看到gulp处理文件的速度非常快,原理是Gulp使用流来处理文件,通过pipe()来转换流中的文件; 而流对象是通过Node.js中的Stream API来实现的; 所以基本Gulp中的操作都是异步的;

顺带说说Glob

glob是一种语法,允许开发使用普通字符或者通配字符串来匹配文件路径

比如"src/**/*"也是属于glob的一种,用来匹配src下的所有文件;

比如fast-glob库,扩展了Glob语法,可以用来快速高效的扫描文件, 比如element-plus中,就用到fast-glob在vite进行打包构建的时候,做文件扫描工作;

Gulp的扩展使用

Gulp具有丰富的开源社区,并有丰富的插件体系,但随着webpack, vite rollup等构建工具的崛起,Gulp在构建过程中的热更新和tree-shaking等方面支持的欠缺,Gulp更适合来做静态资源的密集性的操作处理,不负责对打包后的资源整合工作,

比如利用Gulp来对文件读写、编译、压缩、合并等处理,因为它能高效的处理文件流;

参考

一看就懂的gulp操作指南:让前端工作变得更加轻松(一)-阿里云开发者社区

Gulp基本入门