22

ドキュメントにあるように、どちらも非ストリーム プラグインをストリームに変換する処理を行っています。

私が理解しようとしているのは、.pipe()何かでメソッドを使用できる場合、それはストリームではないということですか?

もしそうなら、ここで何を何に変換しますか?


ビニールソースストリームの例:

(から: https://www.npmjs.com/package/vinyl-buffer )

var browserify = require('browserify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var size = require('gulp-size')
var gulp = require('gulp')

gulp.task('build', function() {
  var bundler = browserify('./index.js')

  return bundler.pipe()
    .pipe(source('index.js'))
    .pipe(buffer()) // <---------------------- why?
    .pipe(uglify())
    .pipe(size())
    .pipe(gulp.dest('dist/'))
})


gulp-streamify の例:

(から: https://www.npmjs.com/package/vinyl-source-stream )

var source = require('vinyl-source-stream')
var streamify = require('gulp-streamify')
var browserify = require('browserify')
var uglify = require('gulp-uglify')
var gulp = require('gulp')

gulp.task('browserify', function() {
  var bundleStream = browserify('index.js').bundle()

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify())) // <----------- why?
    .pipe(gulp.dest('./bundle.js'))
})
4

4 に答える 4

18

やや有用な例の 1 つは、バケツの水でキャンプファイヤーを消すことを考えることです。火を消すには、火にかける前にバケツを完全に満たす必要があります。バケツに数滴入れてから、時間の経過とともにたくさんの小さな滴を火に投じます。この比喩はすべてを捉えているわけではありませんが、大きなアイデアは次のとおりです。火を消す前に、バケツ一杯の水が必要です。

その「醜い」プラグインも同じように機能します。圧縮/醜化したい巨大なJSファイルを想像してみてください。

コードベース全体をロードするには少し時間がかかります。各行が入ってくるたびに縮小しようとは思わないでしょう。1行をロードして縮小し、別の行をロードして縮小するなどを想像してみてください-それは混乱するでしょう. それをストリーミングすることはできません (それを醜くする前に、コードの完全な「バケツ」が必要です)。そのファイルを適切に醜くするには、それを醜くしようとする前に、まずそのすべてのコードをロードする必要があります。

Gulpは「ストリーミング」ビルドシステムであるため、ストリームをバッファに変換するメカニズムがない限り、uglifyを使用できません(&が完了したらストリームを発行します)。言及した両方のツールでこれが可能になります。

フローは次のとおりです: STREAM > (BUFFER) > {「バッファリングされた」ファイル全体に対していくつかの作業を実行} > STREAM > {その他の gulp 作業など }

特定の質問に対しては、 vinyl-buffer/gulp-streamify がストリームをバッファに「変換」してからバッファをストリームに変換するため、 .pipe() を使用できます。これらは、本質的に同じことを達成するための異なるアプローチです。

于 2016-08-10T21:21:51.117 に答える
7

As said, most plugins work with buffers (although some of them also support streams). Examples include gulp-uglify and gulp-traceur. You can do the conversion to buffers using gulp-buffer.

via https://medium.com/@webprolific/getting-gulpy-a2010c13d3d5

  • gulp-uglify dosen't support stream, so you should convert stream to buffer (example uses vinyl-buffer)

  • gulp-streamify can wrap old plugins to support streams(example uses gulp-uglify)

Different approaches but equally satisfactory results.

于 2015-05-16T15:01:28.743 に答える
1

私が理解しようとしているのは、何かに .pipe() メソッドを使用できるかどうかということです。それは、それがストリームであるという意味ではありませんか?

はい!ストリームです。しかし、それはオブジェクトストリームです!

一連の文字をストリーミングする代わりに、ソースとして指定したファイルである一連のオブジェクトをストリーミングします。

gulp ストリームの各「データ」イベントは、次のようなVinylファイル オブジェクトを出力します。

{
  cwd: '/',              //<string>
  base: '/test/',        //<string>
  path: '/test/file.js', //<string>
  contents: contents     //<string> | <Buffer> | <stream.Readable>
}


したがって、gulp-bufferプラグインは、ファイルの内容を からに変換するTransform ストリームです。stream.ReadableBuffer

これはソースで確認できます。24 行目で元のコンテンツ ストリームを保存し、35 行目で新しいファイル コンテンツとして Buffer を割り当てています。

Streamifyは35行目と48行目で同じことを行います。

Uglify がファイルの処理を完了した後、ファイルの内容を Buffer として残しても問題ありません。コンテンツがバッファであることは常に問題ありませんが、コストがかかりすぎるため、ソーシング時に gulp はこれを行いません。

于 2018-12-14T05:23:58.247 に答える