How can I write a simple gulp pipe function?

Javascriptnode.jsGulp

Javascript Problem Overview


I've been trying for a day to write two pipe functions, one that compiles less files and another one that concats these files. I want to learn how to write transform streams/pipes for more complex plugins.

So I want to know how to read data from another pipe, and how to alter that data and send it to the next pipe. This is what I have so far:

 gulp.src(sources)
   .pipe(through.obj(function (chunk, enc, cb) {

     var t = this;
     // console.log("chunk", chunk.path);
     fs.readFile(chunk.path, enc, function (err,data) {
       if (err) { cb(err); }
                        
       less.render(data, {
         filename : chunk.path,
         sourceMap : {
           sourceMapRootpath : true
         }
       })
       .then(function (outputCss) {
          // console.log("less result",outputCss);
          t.push(chunk);// or this.push(outputCss) same result
          cb();
       });

     });

   }))
   .pipe(through.obj(function (chunk, enc, cb) {
     console.log("chunk", chunk.path); // not event getting called.
     cb();
   }))

I can't get the outputCSS for each file in the second pipe. How can I send it?

Javascript Solutions


Solution 1 - Javascript

Well, you don't need to use fs here, you already got the stream of file (here your chunk).

Another point, you're not sending back to the pipe the files, so I guess that's why nothing is called on your second one.

const through = require('through2')

gulp.src(sources)
  .pipe(through.obj((chunk, enc, cb) => {
    console.log('chunk', chunk.path) // this should log now
    cb(null, chunk)
  }))

In ES2015:

import through from 'through2'

gulp.src(sources)
  .pipe(through.obj((chunk, enc, cb) => cb(null, chunk)))

And for your specific example:

.pipe(through.obj((file, enc, cb) => {
  less.render(file.contents, { filename: file.path, ... }) // add other options
    .then((res) => {
      file.contents = new Buffer(res.css)
      cb(null, file)
    })
}))

This is still pretty basic, I don't check for errors, if it's not a stream and so on, but this should give you some hint on what you've missed.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVlad NiculaView Question on Stackoverflow
Solution 1 - JavascriptPreviewView Answer on Stackoverflow