如何在Gulp中使用Browserify来净化输出？

javascript node.js gulp browserify uglifyjs

2022-08-30 05:29:55

我试图在Gulp中净化Browserify的输出，但它不起作用。

咕噜咕噜.js

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

gulp.task('browserify', function() {
    return browserify('./source/scripts/app.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(uglify()) // ???
        .pipe(gulp.dest('./build/scripts'));
});

据我所知，我无法按以下步骤进行操作。我是否需要在一根管道中制作以保留序列？

gulp.task('browserify', function() {
    return browserify('./source/scripts/app.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(uglify()) // ???
        .pipe(gulp.dest('./source/scripts'));
});

gulp.task('scripts', function() {
    return grunt.src('./source/scripts/budle.js')
        .pipe(uglify())
        .pipe(gulp.dest('./build/scripts'));
});

gulp.task('default', function(){
    gulp.start('browserify', 'scripts');
});

答案 1

你实际上已经非常接近了，除了一件事：

您需要转换由 with 给出的流式黑胶文件对象，因为（和大多数 gulp 插件）适用于缓冲的黑胶文件对象source()vinyl-buffergulp-uglify

所以你会有这个

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

gulp.task('browserify', function() {
  return browserify('./source/scripts/app.js')
    .bundle()
    .pipe(source('bundle.js')) // gives streaming vinyl file object
    .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
    .pipe(uglify()) // now gulp-uglify works 
    .pipe(gulp.dest('./build/scripts'));
});

或者，您可以选择使用代替，它为您处理流和缓冲的乙烯基文件对象，就像这样vinyl-transform

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');


gulp.task('build', function () {

  // use `vinyl-transform` to wrap the regular ReadableStream returned by `b.bundle();` with vinyl file object
  // so that we can use it down a vinyl pipeline
  // while taking care of both streaming and buffered vinyl file objects
  var browserified = transform(function(filename) {
    // filename = './source/scripts/app.js' in this case
    return browserify(filename)
      .bundle();
  });

  return gulp.src(['./source/scripts/app.js']) // you can also use glob patterns here to browserify->uglify multiple files
    .pipe(browserified)
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts'));
});

上述两种食谱将实现相同的目标。

它只是关于你想要如何管理你的管道（在常规的NodeJS流和流式黑胶文件对象和缓冲的乙烯基文件对象之间转换）

编辑：我写了一篇关于使用gulp + browserify和不同方法的更长的文章：https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

答案 2

另外两种方法，取自黑胶唱片源流 NPM 页面：

鉴于：

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

方法 1 ~~使用 gulpify~~（已弃用）

gulp.task('gulpify', function() {
  gulp.src('index.js')
    .pipe(gulpify())
    .pipe(uglify())
    .pipe(gulp.dest('./bundle.js'));
});

方法 2使用黑胶源流

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

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('./bundle.js'));
});

第二种方法的一个好处是它直接使用Browserify API，这意味着您不必等待gulpify的作者更新库。