首页 > 解决方案 > gulpfile 错误接收了一个非乙烯基对象

问题描述

我正在尝试将旧的 gulpjs 文件转换为 es6,但我在concat任务中不断收到此错误消息:

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

我的gulpfile.js

import gulp from 'gulp';

/*********** Jade and Pug templating ***********/
import jade from 'gulp-jade';
import pug from 'gulp-pug';

/*********** SASS and SCSS compiling ***********/
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import cleanCss from 'gulp-clean-css';

/*********** JS concat and minify ***********/
import concat from 'gulp-concat';
import minify from 'gulp-minify';

/*********** Static server ***********/
import bs from 'browser-sync';

const dirs = {
    pug_src: 'views',
    sass_src: 'assets/scss',
    js_src: 'assets/js',
    dist: 'dist',
    js_dist: 'dist/js/',
    sass_dist: 'dist/css/'
};

const files = {
    pug: `${dirs.pug_src}/*.pug`,
    sass: `${dirs.sass_src}/*.sass`,
    js: `${dirs.js_src}/*.js`,
    html: `${dirs.dist}/*.html`
}

/*********** HTML ***********/
gulp.task('pug', () => {
    return gulp.src(files.pug)
    .pipe(pug({
        pretty: false
    }).on('error', (e) => {
        console.log(e)
    }))
    .pipe(gulp.dest(dirs.dist));
});

/*********** Styles ***********/
gulp.task('sass', () => {
    return gulp.src(files.sass)
    .pipe(sass({
        outputStyle: 'compressed'
    })
    .on('error', sass.logError))
    .pipe(gulp.dest(dirs.sass_dist))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(cleanCss({
        compatibility: 'ie8'
    }))
    .pipe(bs.stream());
});

/*********** Concat JS files ***********/
gulp.task('concat', () => {
    return gulp.src(files.js)
    .pipe(concat('main.js'))
    .pipe(minify({
        src: 'main.js',
        min: '.min.js'
    }))
    .pipe(gulp.dest(dirs.js_dist));
});

/*********** BrowserSync ***********/
gulp.task('serve', gulp.series('pug', 'sass', 'concat'), () => {
    bs.init({
        server: {
            baseDir: dirs.dist
        }
    });
});

/*********** Watch ***********/
gulp.task('watch', () => {
    gulp.watch(files.pug, gulp.series('pug'));
    gulp.watch(files.sass, gulp.series('sass'));
    gulp.watch(files.js, gulp.series('concat')).on('change', bs.reload);
    gulp.watch(files.html).on('change', bs.reload);
});

/*********** Default ***********/
gulp.task('default', gulp.series('serve', 'watch'));

我已经改变了gulp.dist()gulp.dest(dirs.js_dist)gulp.dest('dist/js/'),仍然得到同样的错误。

[16:30:20] Failed to load external module @babel/register
[16:30:20] Requiring external module babel-register
[16:30:38] Using gulpfile ~/Workspace/Projects/AHTM-source/gulpfile.babel.js
[16:30:38] Starting 'default'...
[16:30:38] Starting 'serve'...
[16:30:38] Starting 'pug'...
[16:30:38] Finished 'pug' after 415 ms
[16:30:38] Starting 'sass'...
[16:30:39] Finished 'sass' after 369 ms
[16:30:39] Starting 'concat'...
[16:30:39] 'concat' errored after 69 ms
[16:30:39] Error: Received a non-Vinyl object in `dest()`
    at DestroyableTransform.normalize [as _transform] (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/vinyl-fs/lib/dest/prepare.js:16:17)
    at DestroyableTransform.Transform._read (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_transform.js:172:83)
    at doWrite (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_writable.js:428:64)
    at writeOrBuffer (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_writable.js:334:11)
    at Pumpify.Duplexify._write (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/duplexify/index.js:208:22)
    at doWrite (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_writable.js:428:64)
    at writeOrBuffer (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_writable.js:417:5)
    at Pumpify.Writable.write (/home/cdetecnologias/Workspace/Projects/AHTM-source/node_modules/readable-stream/lib/_stream_writable.js:334:11)
[16:30:39] 'serve' errored after 856 ms
[16:30:39] 'default' errored after 859 ms

标签: javascriptgulpgulp-concat

解决方案


这看起来是由最新版本的 Gulp 中的 Vinyl 版本更改引起的,因为这是一个重大更改:

https://github.com/gulpjs/gulp/commit/c1ba80cb6b1a2e1469a7f422ec6ee93ac589d714#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

特别是您依赖的一个包正在导入旧版本的 Vinyl,很可能是缩小版。这很可能已经更新(最初的问题是在 2018 年 7 月提出的),但对于其他正在转换 gulp 脚本的人,您可能会遇到这种情况。

包依赖项(GulpJS 插件)应该使用最新版本的 Vinyl。请参阅: https ://gulpjs.com/docs/en/api/vinyl


推荐阅读