gulp中乙烯基缓冲液和gulp-streamify的目的是什么？

Question

正如文档所述,它们都处理将非流插件转换为流.

我试着理解的是,如果我可以.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'))
})

Answer 1

一个半有用的例子是考虑用一桶水熄灭篝火.为了扑灭火灾,你需要完全填满水桶,然后将其倾倒在火上,而不是在桶中放几滴,然后随着时间的推移在火上倾倒大量的小水滴.这个比喻并不能捕捉到所有东西,但最重要的是这个:你需要一桶水,才能灭火.

那个"uglify"插件的工作方式相同.想象一下你想要压缩/ uglify的一些巨大的JS文件.

加载整个代码库需要一点时间,你绝对不想尝试缩小每一行,对吧？想象一下,你加载一行,缩小它,加载另一行,缩小它等等 - 这将是一团糟.你无法流式传输它(你需要一个完整的"桶"代码才能解开它.)要正确地解释该文件,你需要先加载所有代码,然后再尝试对其进行uglify.

由于Gulp是一个"流式"构建系统,你不能使用uglify,除非你有一些机制将流转换成一个缓冲区(当它完成后发出一个流.)你提到的这两个工具都可以实现.

这是流程:STREAM>(BUFFER)> {对整个"缓冲"文件执行一些工作}> STREAM> {其他gulp工作等}

对于您的具体问题,您可以使用.pipe(),因为乙烯基缓冲区/ gulp-streamify有助于将"转换"流到缓冲区然后缓冲到流.它们是完成基本相同的事情的不同方法.

Answer 2

如上所述,大多数插件都使用缓冲区(尽管其中一些插件也支持流).例子包括gulp-uglify和gulp-traceur.您可以使用gulp-buffer进行缓冲区转换.

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

• gulp-uglify不支持流,所以你应该将流转换为缓冲区(示例使用vinyl-buffer)

• gulp-streamify可以包装旧插件以支持流(示例用途gulp-uglify)

方法不同但结果同样令人满意.