Во всех проектах один и тот же 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
Может быть, вы уже сталкивались с подобной проблемой или видели решение - поделитесь, пожалуйста, буду безумно благодарна! Собирать всё заново после каждой ошибки - грустно :с
У вас используется 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() возвращает новый поток на каждый запуск таски
Как оказалось, проблему вызывал gulp-uglify
- если его .pipe
был закомментирован, всё работало нормально. В причине этой ошибки я пока разобраться не смогла, поэтому заменила его на gulp-js-minify
(https://www.npmjs.com/package/gulp-js-minify).
P.S.: если вы знаете, в чём может быть ошибка и как разобраться с gulp-uglify
- напишите, пожалуйста, буду благодарна за помощь.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Использую @pact-foundation/pact@latest (для быстроты развёртывания моего случая есть простой пример на jest)
У меня получилось сделать так, чтобы Джек запрыгивал на блок, но никак не получается осуществить его падение, если он с этого блока сходитПоходу,...
Взялся изучать JS, установил VS CodeНаписал код, однако запустить его не могу
Недавно начал проходить курс по webpack, поэтому не судите строго, столкнулся с одной ошибкой пытался гуглить ее, но никакие ответы не помогли...