3

Во всех проектах один и тот же gulpfile.js живёт без изменений уже почти год, всё работало прекрасно и буквально вчера таск gulp watch начал вылетать со странной ошибкой:

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
at writeAfterEnd (_stream_writable.js:248:12)
at ObjectTransform.Writable.write (_stream_writable.js:296:5)
at Transform.ondata (_stream_readable.js:693:20)
at Transform.emit (events.js:198:13)
at addChunk (_stream_readable.js:288:12)
at readableAddChunk (_stream_readable.js:269:11)
at Transform.Readable.push (_stream_readable.js:224:10)
at Transform.push (_stream_transform.js:151:32)
at Transform.afterTransform (_stream_transform.js:92:10)
at Transform.transform [as _transform] (/home/front/Projects/project/node_modules/gulp-eslint/index.js:82:3)
Emitted 'error' event at:
at DestroyableTransform.onerror (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_readable.js:640:52)
at DestroyableTransform.emit (events.js:198:13)
at DestroyableTransform._transform (/home/front/Projects/project/node_modules/gulp-babel/index.js:54:9)
at DestroyableTransform.Transform._read (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_transform.js:172:83)
at doWrite (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_writable.js:428:64)
at writeOrBuffer (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_writable.js:417:5)
at DestroyableTransform.Writable.write (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_writable.js:334:11)
at DestroyableTransform.ondata (/home/front/Projects/project/node_modules/readable-stream/lib/_stream_readable.js:619:20)
at DestroyableTransform.emit (events.js:198:13)

Причём, вылетает не сразу: одно изменение в любом .js-файле сохраняет, а при втором вылетает с ошибкой. С .css-файлами такой проблемы нет - там, как и раньше, сохраняется любое количество изменений.

Пробовала:

  • апгрейдить и даунгрейдить npm: не помогло, ошибка всё та же
  • использовать gulp-watch вместо gulp.watch: не удалось, ошибка исчезла, но изменения в файле не отслеживались вообще
  • апгрейдить gulp 3.9.1 => 4.0.0: не удалось, error: pathspec '4.0' did not match any file(s) known to git - видимо, эту версию сейчас оттуда не достать
  • гуглить ошибку: не помогло, т.к. большинство ответов связано с серверами на Node.js и кодом для них (которого в моём проекте нет). Гугление ошибки в связке с gulp, eslint, browsersync тоже не дало особых результатов.
  • закомментировать в gulpfile.js строку с таской для eslint (в ошибке есть путь до него): не помогло, путь сменяется на модуль из следующей строки - babel

gulpfile.js:

'use strict';

const gulp = require('gulp');

// utilities
const runSequence = require('run-sequence');
const del = require('del');
const cache = require('gulp-cache');
const browserSync = require('browser-sync').create();

// sourcemaps
const sourcemaps = require('gulp-sourcemaps');

// javascript
const uglify = require("gulp-uglify-es").default();
const babel = require('gulp-babel');
const eslint = require('gulp-eslint');
const concat = require('gulp-concat');

// css
const postcss = require('gulp-postcss');
const csso = require('gulp-csso');

// images
const imagemin = require('gulp-imagemin');
const svgo = require('gulp-svgo');

const src_dir = 'src/**';
const css_src = `src/blocks/**/*.css`;
const js_src = `src/blocks/**/*.js`;
const dest_dir = 'dist';
const dest_dir_css = `${dest_dir}/css`
const dest_dir_js = `${dest_dir}/js`

const postcssPlugins = [
    require('postcss-import'),
    require('precss'),
    require('postcss-short'),
    require('postcss-use'),
    require('postcss-utilities'),
    require('autoprefixer'),
    require('cssnext'),
    require('postcss-normalize')({ forceImport: true }),
    require("postcss-reporter")({ clearReportedMessages: true }),
];

const htmlminConfig = {
    collapseWhitespace: true,
    removeComments: true
};

var count = require('gulp-count');

gulp.task('js', () => {
  return gulp.src(js_src)
        .pipe(count('## js-files selected'))
        .pipe( concat ('bundle.js') )
        .pipe( sourcemaps.init() )
        .pipe( babel() )
        .pipe( eslint() )
        .pipe( uglify )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest(dest_dir_js) )
});

gulp.task('css', () =>
    gulp.src(css_src)
        .pipe( sourcemaps.init() )
        .pipe( postcss(postcssPlugins) )
        .pipe( sourcemaps.write('.') )
        .pipe( concat ('bundle.css') )
        .pipe( gulp.dest(dest_dir_css) )
        .pipe( browserSync.reload({ stream: true }))
);

gulp.task('browserSync', () =>
    browserSync.init({
        server: {
            baseDir: './'
        },
    })
);

gulp.task('images', () =>
    gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
        //.pipe( cache( imagemin() ) )
        .pipe( svgo() )
        .pipe( gulp.dest('dist/images') )
);

gulp.task('watch', ['browserSync'], () => {
    gulp.watch(css_src, ['css']);
    gulp.watch(js_src, ['js']);
    gulp.watch(dest_dir_js, browserSync.reload);
});

gulp.task('clean', () => del([dest_dir]) );
gulp.task('default', ['clean'], () => runSequence('css', 'js', 'images') );

Структура проекта:

dist
|__css
|  |__bundle.css
|
|__images  
|
|__js
   |__bundle.js
   |__bundle.js.map

src
|__blocks
|  |__block1
|  |  |__block1.css
|  |  |__block1.js
|  |  
|  |__block2 
|  |  |__ ...
|  |
|  |__ ...
|
|__images
|
|__fonts

Может быть, вы уже сталкивались с подобной проблемой или видели решение - поделитесь, пожалуйста, буду безумно благодарна! Собирать всё заново после каждой ошибки - грустно :с

4
  • Может быть проблема из-за gulp.watch(dest_dir_js, browserSync.reload);, попробуйте удалить его и добавить в конец js таски .pipe( browserSync.reload({ stream: true })) 10 июл 2019 в 10:36
  • @DmitryDavydov, не помогло - всё так же при первом изменении работает, при втором вылетает с той же ошибкой
    – ne_tum
    10 июл 2019 в 10:58
  • Попробуйте вырезать по очереди все плагины, иногда бывает что какой-нибудь старой версии или просто конфликтует, вплоть до ``` gulp.task('js', () => { return gulp.src(js_src) .pipe( gulp.dest(dest_dir_js) ) }); gulp.task('watch'], () => { gulp.watch(js_src, ['js']); }); ``` 10 июл 2019 в 11:20
  • @DmitryDavydov, таким образом удалось установить, что проблема с gulp-uglify - если его .pipe закомментировать, то всё продолжает работать. Но в чём причина пока не могу понять. Спасибо за идею :)
    – ne_tum
    12 июл 2019 в 7:14

2 ответа 2

2

Как оказалось, проблему вызывал gulp-uglify - если его .pipe был закомментирован, всё работало нормально. В причине этой ошибки я пока разобраться не смогла, поэтому заменила его на gulp-js-minify (https://www.npmjs.com/package/gulp-js-minify).

P.S.: если вы знаете, в чём может быть ошибка и как разобраться с gulp-uglify - напишите, пожалуйста, буду благодарна за помощь.

1

У вас используется gulp-uglify-es, и судя по этому https://ru.stackoverflow.com/a/784678/343238 ответу его можно заменить на обычный gulp-uglify - т.к. вы уже прогнали файлы через babel.

А вторая штука, которая скорее всего и причина изначальной ошибки - у вас в конфиге вызов uglify идёт так

const uglify = require("gulp-uglify-es").default();
...
    .pipe( uglify )

Но в документации иной вариант

let uglify = require('gulp-uglify-es').default;
...
    .pipe(uglify())

И скорее всего ошибка в том, что default() возвращает поток, который в вашем случае используется один раз, а на второй раз уже закрыт, в то время с вариантом как в документации uglify() возвращает новый поток на каждый запуск таски

1
  • Вы правы, дело было в моей невнимательности - убирала и добавляла скобки после uglify в .pipe(uglify()), но совершенно не замечала их отсутствие после default. Спасибо огромное! P.S.: по поводу использования gulp-uglify-es вместо просто gulp-uglify+babel - это тоже было единственным решением, которое я смогла найти, когда у меня в очередной раз сломалась сборка¯ \ _ (ツ) _ / ¯ Надеюсь, что в ходе ближайших экспериментов разберусь и с этой ошибкой.
    – ne_tum
    15 июл 2019 в 9:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.