关于 gulp 4 在 Nodejs 中的使用

发布于 1周前 作者 yibo5220 来自 nodejs/Nestjs

关于 gulp 4 在 Nodejs 中的使用
最近在把一些以前在 gulp 3 上能跑的东西迁移到 gulp 4。

但是我觉得这个东西实在是有点烧脑，这里有同学用 gulp 4 写过东西么，能否分享一下你们的 GitHub 地址我去学习一下？

Harmonyos Next教程
11 回复

gulp4 感觉比 gulp3 写起来更方便一些


你用 gulp3 做什么任务，gulp4 好像就是增加了并行处理而已。

站长更新后遇到了啥问题

最近才开始接触的 gulp，感觉挺喜欢这个写法的。
不过因为才开始学，写的东西也才是 hello world 级别的…
[https://github.com/moegi-design/ghost-theme-Moegi/tree/next]( https://github.com/moegi-design/ghost-theme-Moegi/tree/next)

没用 gulp4 写过复杂的脚本，只写过个简单的

https://github.com/PeterDing/chord/blob/master/gulpfile.js

实际上 Gulp 从 3.x 升级到 4 也升级了很长时间，期间有两次大的 API 变化。

## v4.0

延续了 3.x 时代的写法，只不过把 runSequnce 模块整合到 gulp 里，叫做 gulp.parallel 和 gulp.serial。并且：

1. 取消了 gulp.task('task', ['task1', 'task2', ...]) 的写法，改为 gulp.task('task', gulp.serial('task1', 'task2', ...))；
2. 必须使用回调。

其它基本没变。参考： https://github.com/meathill/mui-reader/blob/master/miniprogram/gulpfile.babel.js

## v4.0.2

开始使用 CommonJS 风格的配置文件，方便复用。主要影响的是写法，我最近才改了一个仓库，供参考： https://github.com/roudanio/roudanio.github.io/blob/master/gulpfile.js

其实变动大的也就并行吧，稍微改动 tasks 的顺序就 OK。
一开始看英文文档的 parallel 和 serial 确实有点懵，但是用着用着就习惯了。

gulp 的本质就是 object stream，而在这个 stream 中传递的是名为 vinyl 的虚拟文件对象。
此外配合 glob (文件通配符）和 gaze （跨平台的文件事件，实现 watch ）让这个流动起来。
所以只要理解这几个东西，基本上就知道 gulp 是怎么动作的了。
至于 series, parallel 这些异步队列挺容易理解的。

node stream: https://nodejs.org/api/stream.html
vinyl: https://github.com/gulpjs/vinyl
node-glob: https://github.com/isaacs/node-glob
gaze: https://github.com/shama/gaze

已经从入门到放弃到滚回去写 Makefile 了

第一次接触 gulp 就是因为这个：

https://code.visualstudio.com/docs/languages/css

不过刚刚发现这个页面上也针对 gulp 4 更新过了。

关于Gulp 4在Node.js中的使用，Gulp是一个基于流的自动化构建工具，常用于前端开发中的任务自动化，如压缩CSS/JS、图片优化、代码检查等。Gulp 4引入了一些重要的改进，如异步任务处理和新的插件系统。以下是一个简单的Gulp 4项目设置示例：

  1. 初始化项目：

    mkdir gulp-project
cd gulp-project
npm init -y

  2. 安装Gulp和所需插件：

    npm install gulp gulp-cli gulp-sass gulp-rename gulp-clean-css --save-dev

  3. 创建Gulpfile.js：

    const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const rename = require('gulp-rename');
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', async function () {
  return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('styles'));

  4. 运行Gulp： 确保你的src/scss/目录下有一个.scss文件，然后在命令行中运行：

    gulp

这将编译你的SCSS文件，压缩并输出到dist/css/目录。Gulp 4通过async函数和gulp.series/gulp.parallel方法支持异步任务，使得任务管理更加灵活和强大。

回到顶部