web-dev-qa-db-ja.com

単純なgulpパイプ関数を作成するにはどうすればよいですか?

私は1日、2つのパイプ関数を記述しようと試みました。1つはより少ないファイルをコンパイルし、もう1つはこれらのファイルを連結します。もっと複雑なプラグイン用の変換ストリーム/パイプの書き方を学びたいです。

そのため、別のパイプからデータを読み取る方法、およびそのデータを変更して次のパイプに送信する方法を知りたいです。これは私がこれまでに持っているものです:

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

2番目のパイプで各ファイルのoutputCSSを取得できません。どうすれば送信できますか?

51
Vlad Nicula

さて、ここでfsを使用する必要はありません。すでにファイルのストリーム(ここではchunk)を取得しています。

もう1つのポイントは、ファイルをパイプに送り返さないことです。そのため、2番目のファイルでは何も呼び出されません。

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

ES2015の場合:

import through from 'through2'

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

そして、あなたの特定の例:

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

これはまだかなり基本的なものであり、ストリームなどではない場合はエラーをチェックしませんが、これはあなたが見逃しているものについてのヒントを与えるはずです。

59
Balthazar