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

2022-01-12 00:00:00 node.js javascript gulp

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

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

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

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

推荐答案

好了，这里你不需要使用 fs，你已经得到了文件流(这里是你的 chunk).

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

在 ES2015 中:

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

这仍然很基本，我不检查错误，如果它不是流等等，但这应该会给你一些关于你错过了什么的提示.

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.

相关文章