2

I'm experimenting with gulp-4 and got stuck with a problem:

I have files similar to .vue

<template lang="pug">
  // ...
</template>

<style lang="scss">
  // ...
</style>

and have 2 tasks:

gulp.task('precompile', () => {
  return gulp.src(['./src/frontend/views/components/**/*.vue',
                   './src/frontend/views/components/**/*.pug',
                   './src/frontend/vendor/**/*.pug'])
            .pipe(vueFilter)
            .pipe(extract('<template lang=\\"pug\\">','<\\/template>'))
            .pipe(ext_replace('.pug'))
            .pipe(vueFilter.restore)
            .pipe(
              foreach(
                (stream, file) => {
                  console.log(file.path)
                  return stream
                    .pipe(pug({
                      client: true,
                      pretty: true,
                      compileDebug: false,
                      debug: false,
                      inlineRuntimeFunctions: false,
                      name: 'render_' + path.basename(file.path, '.pug')
                    }))
                    .pipe(replace(/function\s([a-zA-z0-9\_\$]+)/g, (match, name) => {
                      return name + ': function';
                    }))
                }
              )
            )
            .pipe(concat('templates.js', {
              newLine: ','
            }))
            .pipe(wrap('{ <%= contents %> }\n\r'))
            .pipe(defineModule('es6'))
            .pipe(ins.prepend("import pug from 'vendor/pug-runtime-es6'\n\r"))
            .pipe(prettier())
            .pipe(gulp.dest('./src/frontend/views'));
});

and this:

gulp.task('prepare-sass', () => {
  return gulp.src(['./src/frontend/views/components/**/*.vue', './src/frontend/views/components/**/*.scss'])
            .pipe(vueFilter)
            .pipe(extract('<style lang=\\"scss\\">','<\\/style>'))
            .pipe(ext_replace('.scss'))
            .pipe(vueFilter.restore)
            .pipe(gulp.dest('./src/frontend/views/sass/temp'));
});

May seem complicated but really it's not: second one just extracts styles and then copy them to destination folder, while the first one extracting pug code, precompiles it and then merges in one file "templates.js".

Both tasks work perfectly while running one by one from cli. But when i run them in gulp.series it gives

events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: write after end
    at writeAfterEnd (C:\Programming\js\millionaire\node_modules\readable-stream\lib\_stream_writable.js:288:12)

Well, please don't tell me that all this code and idea itself is hm.. irrelevant (i know that), but the problem indicates that i missunderstand something.. and i can't live with it! ))

Any ideas?

Will appreciate any help or a good piece of advise..

eonae
  • 21
  • 1
  • And besides when executing in series, gulp reports: first one completed, second one completed, whole series completed.. and the error.. – eonae Mar 25 '19 at 21:47

0 Answers0