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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With