如何编写一个简单的 gulp 管道函数？

Question

我已经尝试了一天来编写两个管道函数，一个编译较少的文件，另一个编译这些文件。我想学习如何为更复杂的插件编写转换 streams/pipes。

所以我想知道如何从另一个管道读取数据，以及如何更改该数据并将其发送到下一个管道。这是我目前所拥有的：

 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();
   }))

我无法为第二个管道中的每个文件获取 outputCSS。如何发送？

Answer 1

好吧，你不需要在这里使用 fs，你已经得到了文件流（这里是你的 chunk）。

还有一点，您没有将文件发回管道，所以我想这就是为什么您的第二个文件没有被调用的原因。

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)
  }))

在 ES2015 中：

import through from 'through2'

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

对于您的具体示例：

.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)
    })
}))

这仍然是非常基本的，我不检查错误，如果它不是一个流等等，但这应该会给你一些提示，让你知道你错过了什么。

如何编写一个简单的 gulp 管道函数？

How can I write a simple gulp pipe function?

javascript

node.js

gulp