Gulp 4 - 错误：在结束后写入

Question

当我监视 index.html（完整路径在CONFIG.APP.INDEX中）的更改时，出现了错误。所有我的任务都在单独的文件中。例如，这是tasks/watch.ts：

import * as CONFIG from '../config';

export default done => {
  // other watches
  gulp.watch(CONFIG.APP.INDEX, gulp.series('inject'));
};

第一次更改任务会正常执行，但第二次更改时出现以下错误：

c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:203
  var er = new Error('write after end');
           ^
Error: write after end
    at writeAfterEnd (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:203:12)
    at DestroyableTransform.Writable.write (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:239:20)
    at DestroyableTransform.ondata (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:531:20)
    at emitOne (events.js:77:13)
    at DestroyableTransform.emit (events.js:169:7)
    at readableAddChunk (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:198:18)
    at DestroyableTransform.Readable.push (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:157:10)
    at DestroyableTransform.Transform.push (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:123:32)
    at afterTransform (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:79:51)
    at TransformState.afterTransform (c:\~\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:58:12)
    at c:\~\node_modules\vinyl-fs\lib\src\getContents\bufferFile.js:18:5
    at c:\~\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)

tasks/inject.ts任务：

declare var require;
const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
import * as CONFIG from '../config';

export default done => {
  return gulp
    .src(CONFIG.APP.INDEX)

    .pipe(require('../util/inject/fixes').default) // <--- PROBLEM IS HERE
    // other stuff...
    .pipe(gulp.dest(CONFIG.DST.BUILD))
    .on('error', plugins.util.log);
};

util/inject/fixes.ts 任务

declare var require;
const plugins = require('gulp-load-plugins')();

// errors even with this...
export default plugins.util.noop();

任务从gulpfile.ts/index.ts中被加载，如下所示：

fs.readdirSync('./gulpfile.ts/tasks').map(file => {
  let name = file.replace(/\.ts$/, '');
  let task = require(path.join(path.resolve('.'), 'gulpfile.ts', 'tasks', file));
  gulp.task(name, task.default);
});

我已经确定错误是从哪里引起的，但不知道是什么导致了这个问题，也不知道该如何解决。只有在第一次更改并执行任务后，观看 index.html 时才会出现问题。手动运行任务正常（gulp inject），所有其他观察和任务都正常工作。

- Sasxa

Answer 1

我怀疑你的fixes.ts实现在运行任务时重用了相同的noop()结果，而没有每次重新创建结果。

尝试将fixes.ts转换为返回一个工厂函数，该函数将在每次调用任务时返回一个新的noop实例。

util/inject/fixes.ts:

declare var require;
const plugins = require('gulp-load-plugins')();

// Return a function that will return a new `noop` instance each time:
export default () => {
    return plugins.util.noop();
};

---

为了更好地理解，我在我的项目中遇到了类似的问题，我无意中重复使用了gulp流，并出现了“write after end”错误。

我怀疑你的代码也与 noop() 结果做了同样的事情，因为这个值将被缓存为该模块的值。

错误的 gulpfile.js 版本 - 每次都会重复使用 gulp.dest() 调用的结果。

let gulp = require('gulp');
let merge = require('merge-stream');

let _path = require('path');

let files = {
    'html': {
        src: _path.join('public', 'index.html'),
        dest: gulp.dest('public')  // <-- WRONG use of `gulp.dest()`, causes result to be reused and gives "write after end" error
    },
    'files': 'html': {
        src: _path.join('files', '*'),
        dest: gulp.dest('files')  // <-- WRONG use of`gulp.dest()`
    },
};

gulp.task('copy', function(){
    let html = gulp.src(files.html.src)
        .pipe(files.html.dest);   // <-- `gulp.dest()` should be here

    let files = gulp.src(files.files.src)
        .pipe(files.files.dest);  // <-- `gulp.dest()` should be here

    return merge(html, files);
});


gulp.task('copy-watch', function(){
    let srcList = Object.keys(files).map(i => files[i].src);
    gulp.watch(srcList, ['copy']);
});

修复了我的gulpfile.js文件 - gulp.dest()在每次运行任务时都会被调用：

let files = {
    'html': {
        src: _path.join('public', 'index.html'),
        dest: 'public'  // <-- removed `gulp.dest()` call from here
    },
    'files': 'html': {
        src: _path.join('files', '*'),
        dest: 'files'  // <-- removed `gulp.dest()` call from here
    },
};

gulp.task('copy', function(){
    let html = gulp.src(files.html.src)
        .pipe(gulp.dest(files.html.dest));  // <-- CORRECT use of`gulp.dest()`

    let files = gulp.src(files.files.src)
        .pipe(gulp.dest(files.files.dest)); // <-- CORRECT use of `gulp.dest()`

    return merge(html, files);
});

- Sly_cardinal