Vlad Nicula Vlad Nicula - 3 months ago 26
Node.js Question

How can I write a simple gulp pipe function?

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?

Answer

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.

var through = require('through2')

gulp.src(sources)
  .pipe(through.obj(function (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(function (file, enc, cb) {
  less.render(file.contents, { filename: file.path, ... }) // add other options
    .then(function (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.