javascript - mac - ¿Cuáles son los propósitos del vinil-buffer y gulp-streamify en gulp?

install gulp windows

Question

Como dice la documentación, ambos se ocupan de transformar los complementos que no se transmiten para transmitir.

Lo que trato de entender es que si puedo usar el método .pipe() en algo, ¿no significa que es una transmisión?

Si es así, ¿qué es lo que convierto aquí?

Ejemplo de vinyl-source-stream :

(de: vinyl-source-stream )

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

Ejemplo de gulp-streamify :

(de: 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''))
})

Answer 1

Como se dijo, la mayoría de los complementos funcionan con búferes (aunque algunos de ellos también admiten flujos). Los ejemplos incluyen gulp-uglify y gulp-traceur. Puedes hacer la conversión a buffers usando gulp-buffer.

a través de https://medium.com/@webprolific/getting-gulpy-a2010c13d3d5

• gulp-uglify no es compatible con la transmisión, por lo que debe convertir la transmisión en un búfer (en el ejemplo se usa vinyl-buffer )

• gulp-streamify puede envolver complementos antiguos para admitir secuencias (el ejemplo utiliza gulp-uglify )

Diferentes enfoques pero resultados igualmente satisfactorios.

Answer 2

Lo que trato de entender es si puedo usar el método .pipe () en algo, ¿no significa que es una transmisión?

¡Sí! Es una corriente ¡Pero es un flujo de objetos !

En lugar de transmitir una serie de caracteres, transmite una serie de objetos, que son los archivos que ha obtenido.

Cada evento de ''datos'' en una secuencia trillada emite un objeto de archivo de Vinyl , que se parece a esto:

{ cwd: ''/'', //<string> base: ''/test/'', //<string> path: ''/test/file.js'', //<string> contents: contents //<string> | <Buffer> | <stream.Readable> } Por lo tanto gulp-buffer complemento gulp-buffer es un flujo de transformación que convierte el contenido del archivo de stream.Readable puede stream.Readable en Buffer .

Puede ver esto en la fuente, donde guarda el flujo de contenido original en la línea 24 y asigna un Buffer como el nuevo contenido de archivo en la línea 35 .

gulp-streamify hace lo mismo, en la línea 35 y en la línea 48 .

Está bien dejar el contenido del archivo como Buffer después de que Uglify haya terminado de procesarlo. Siempre está bien que el contenido sea un Buffer, trago simplemente no hace esto cuando se abastece porque es demasiado costoso.

Answer 3

Lo que trato de entender es si puedo usar el método .pipe () en algo, ¿no significa que es una transmisión?

No, .pipe () también puede pasar buffers. Esta publicación del blog lo explica bien:

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

Algunos complementos de gulp- * funcionan tomando objetos de archivos de vinilo almacenados como entrada.
Pero vinyl-source-stream emite un objeto de archivo de vinilo de transmisión .

Ahí es donde entra en juego el búfer de vinilo . Así que simplemente necesitamos convertir eso en un vinilo con búfer utilizando el búfer de vinilo , como así

Answer 4

Un ejemplo semi-útil es pensar en apagar una fogata con un cubo de agua. Para apagar el fuego, querría llenar completamente el cubo antes de tirarlo al fuego, en lugar de poner unas gotas en el cubo y luego tirar muchas gotas pequeñas sobre el fuego. Esta metáfora no captura todo, pero la gran idea es esta: necesitas un cubo lleno de agua antes de poder apagar el fuego.

Ese plugin "uglify" funciona de la misma manera. Imagina un enorme archivo JS que quieras comprimir / uglificar.

Tomará un poco de tiempo cargar la base de código completa y definitivamente no querrá intentar minimizar cada línea a medida que entra, ¿verdad? Imagine que carga una sola línea, la minimiza, la carga de otra línea, la minimiza, etc. etc. sería un desastre. No puede transmitirlo (necesita un "paquete" completo de código antes de poder refutarlo). Para verificar correctamente el archivo, primero debe cargar todo ese código antes de intentarlo.

Dado que Gulp es un sistema de compilación en "transmisión", no puede usar uglify a menos que tenga algún mecanismo para convertir la transmisión en un búfer (y cuando haya terminado de emitir una transmisión). Las dos herramientas que menciona hacen que esto sea posible.

Aquí está el flujo: STREAM> (BUFFER)> {realizar algunos trabajos en todo el archivo "buffered"}> STREAM> {otro trabajo truculento, etc.}

Para su pregunta específica, puede usar .pipe () porque vinyl-buffer / gulp-streamify ayuda a "convertir" flujos en búferes y luego en búferes a flujos. Son diferentes enfoques para lograr esencialmente lo mismo.