Prehistory

I look, with the conditional saving of files in gulp things are, to put it mildly, not very.

  • My other question Gulp: several arbitrary input and output paths at the time of asking this question remained unanswered. Unfortunately, the commentator was offended by my wit and didn’t put it more clearly so that I could understand and write a working solution.
  • On the English-language site, things are not very good either: for example, in the commentary on the question Gulp: some common words were said, but for several hours they were not crowned with even a simple working solution, even some oddities appeared, one of which we will consider in this matter.
  • I received the solution for the gulp: set multiple gulp.src and respective gulp.dest (on gulp-sass example) , but it is hardly possible to form a conditional output directory on its basis depending on the input.

  • gulp-path also very limited: at first glance it makes it easy to establish a connection between the input and output paths, but suddenly it turned out that it does not provide any simple solution for a typical, even routine sass task, where the source code is stored along the way with the last folder sass , and the output files are placed in the directory with the last css folder:

     development/sass/**/*+.(sass|scss) ➑ production/css/

No, this will not work: you need to achieve completely conditional output of files with the definition of the source path and the formation of the output path depending on the source one, even if the source directory and the output directory are located in different root directories. Otherwise, where is it - proof of the fact that the gulp is a powerful thing?

Task

The correspondence of the input and output paths for the sass sass shown below:

 development/source/public/sass ➑ development/build/public/css development/source/admin/sass ➑ development/build/admin/css

The code below won't do anything like this, but before continuing to try to output files to the correct directory, you need to deal with the results of debugging.

  gulp.task('sass', function(){ let destinationPath = ''; return gulp.src(`development/source/**/*.sass`) .pipe(sass()) .pipe(rename(function (file){ console.log('ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌοΌš' + destinationPath); switch (file.dirname){ case `public\\sass`: { destinationPath = `development/build/public/css`; console.log('Π‘Ρ€Π°Π·Ρƒ послС пСрСимСнования:' + destinationPath); break; } case `admin\\sass`: { destinationPath = `development/build/admin/css`; console.log('Π‘Ρ€Π°Π·Ρƒ послС пСрСимСнования:' + destinationPath); break; } default: break; } })) .pipe(plumber(console.log('ПослС пСрСимСнования:' + destinationPath))) .pipe(gulp.dest(destinationPath)); });

So, when I started the task, I got the following output to the console:

 [18:03:41] Starting 'sass'... ПослС пСрСимСнования: ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ: Π‘Ρ€Π°Π·Ρƒ послС пСрСимСнования: development/build/public/css [18:03:41] 'sass' errored after 46 ms [18:03:41] Error: Invalid output folder

That is, what happened: at first, gulp skipped several pipes and immediately went to the .pipe(plumber(console.log('ПослС пСрСимСнования:' + destinationPath))) line .pipe(plumber(console.log('ПослС пСрСимСнования:' + destinationPath))) . Naturally, destinationPath is still an empty string (and if you do not initialize destinationPath , the task will fall).

Then gulp returns to the .pipe(rename(function (file){} ... line .pipe(rename(function (file){} ... and in the necessary case block it changes the value of the destination variable. However, when gulp again reaches .pipe(plumber(console.log('ПослС пСрСимСнования:' + destinationPath))) - this time seems good, but nevertheless we get an error Invalid output folder .

Can you explain what is happening? What have I not learned about Node JS and vinyl-fs streams?

    0