web-dev-qa-db-ja.com

gulpでのビニールバッファーとgulp-streamifyの目的は何ですか？

ドキュメントに記載されているように、どちらも非ストリームプラグインをストリームに変換することを扱っています。

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

もしそうなら、私はここで何に変換しますか？


vinyl-source-stream 例：

（from： 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 例：

（from： 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'))
})
javascriptgulpnode.js-stream
20
Asaf Katz

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

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

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

Gulpは「ストリーミング」ビルドシステムであるため、ストリームをバッファーに変換するメカニズムがない限り、uglifyを使用することはできません（そして、ストリームが完了すると、ストリームを出力します）。

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

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

13
Victor

前述のように、ほとんどのプラグインはバッファで動作します（ただし、一部のプラグインはストリームもサポートしています）。例としては、gulp-uglifyやgulp-traceurがあります。 gulp-bufferを使用してバッファーへの変換を行うことができます。

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

  • gulp-uglifyはストリームをサポートしていないため、ストリームをバッファに変換する必要があります（例ではvinyl-buffer）

  • gulp-streamify can古いプラグインをラップしてストリームをサポートする（例ではgulp-uglify）

アプローチは異なりますが、同様に満足のいく結果が得られます。

6
hegfirose

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


いいえ、.pipe（）はバッファを渡すこともできます。このブログ投稿はそれをよく説明しています：

https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f962

一部のgulp- *プラグインは、bufferedビニールファイルオブジェクトを入力として取り込むことで機能します。
しかし、Vinyl-source-streamはstreamingビニールファイルオブジェクトを発行します。

そこでVinyl-bufferが入ります。したがって、Vinylを使用して、それをバッファリングされたビニールに変換する必要があります。 -バッファ、そのように

2
Asaf Katz