javascript – 乙烯基缓冲液和gulp-streamify在gulp中的目的是什么?

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

我试图理解的是,如果我可以使用.pipe()方法的东西,这不意味着它是一个流?

如果是这样,我该怎么转换到这里?

vinyl-source-stream示例:

(从: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'))
})
最佳答案
一个半有用的例子是考虑用一桶水扔出篝火.为了扑灭火力,你会想把它完全填满桶,然后把它倒在火上,而不要在水桶里放几滴,然后随着时间的推移就倾倒大量的小滴.这个隐喻并没有捕捉到所有的东西,只不过这个大主意是:你需要一桶水才能扑灭火焰.

那个“uglify”插件的工作原理是一样的.想象一下你想要压缩/ uglify的一些巨大的JS文件.

加载整个代码库需要花费一点时间你肯定不想在进入每一行时尝试细化,对吧?想象一下,你加载一条线,缩小它,加载另一行,缩小等等 – 这会是一团糟.您无法流式传输(您需要一个完整的“桶”代码,然后才能uglify).要正确uglify该文件,您需要先加载所有的代码,然后再尝试uglify它.

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

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

对于您的具体问题,您可以使用.pipe(),因为vinyl-buffer / gulp-streamify帮助“转换”流到缓冲区,然后缓冲流.他们是完成本质上相同的事情的不同方法.

转载注明原文:javascript – 乙烯基缓冲液和gulp-streamify在gulp中的目的是什么? - 代码日志