升级Gulp 4后遇Error: Received a non-Vinyl object in `dest()`错误求助

问题描述 #

• 触发错误：

Error: Received a non-Vinyl object in dest()

• 环境版本：npm 9.8.0、node 20.5.1、gulp 4.0.2
• 已尝试操作：删除package-lock.json和node_modules后重新执行npm install，问题仍存在

问题根源 #

Gulp 4.x对任务的异步处理和流的规范性要求更严格，你的配置里有两处核心问题：

1. watch-app任务返回了watchify实例而非Gulp可识别的异步信号（流/Promise/回调），导致Gulp无法追踪任务状态，进而引发流处理异常。
2. watch-less任务未返回有效流或异步信号，Gulp无法确认任务完成状态，干扰后续流程。
3. 旧版vinyl-source-stream可能与Gulp 4.x存在兼容性问题。

修复步骤 #

1. 修正watch-app任务 #

调整任务结构，通过回调函数告知Gulp任务初始化完成：

gulp.task('watch-app', function (done) {
    var bundler = browserify({
        entries: path.ENTRY_POINT,
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    var watcher = watchify(bundler);

    var rebundle = function () {
        var start = Date.now();

        watcher.bundle()
            .on('error', gutil.log.bind(gutil, 'Browserify Error'))
            .pipe(source(path.NON_MINIFIED_OUT))
            .pipe(gulp.dest(path.DEST_BUILD))
            .on('end', function() {
                gutil.log('[browserify]', 'rebundle took ', gutil.colors.cyan(new Date().getTime() - start + ' ms'));
            });
    };

    watcher.on('update', rebundle);
    rebundle();
    done();
});

2. 修正watch-less任务 #

抽取编译逻辑，确保任务返回有效异步信号：

gulp.task('watch-less', function (done) {
    function compileLess() {
        return gulp.src(['./css/less/main.less'])
            .pipe(less())
            .pipe(minifyCSS())
            .pipe(gulp.dest('./css'));
    }

    compileLess();
    gulp.watch('./css/less/*.less', compileLess);
    done();
});

3. 更新依赖版本 #

确保vinyl-source-stream适配Gulp 4.x：

npm install vinyl-source-stream@latest --save-dev

另外，gulp-util已在Gulp 4.x中被弃用，可替换为Gulp内置日志工具：

npm uninstall gulp-util --save-dev

代码中替换gutil引用：

const { log, colors } = require('gulp');

对应日志代码修改为：

.on('error', log.bind(null, 'Browserify Error'))
// ...
log('[browserify]', 'rebundle took ', colors.cyan(new Date().getTime() - start + ' ms'));

4. 验证修复 #

执行gulp default测试错误是否消失，若仍存在，可彻底清理缓存后重装依赖：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

内容的提问来源于stack exchange，提问作者Dipar