如何在Gulp中使用Browserify对输出进行混淆？

Question

如何在Gulp中使用Browserify对输出进行混淆？

115

我尝试在 Gulp 中美化 Browserify 的输出，但是没有成功。

gulpfile.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');
});

- Nik Terentyev

3个回答

13

来自vinyl-source-stream 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');

方法一 使用 gulpify（已弃用）

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

方法2 使用 vinyl-source-stream

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 的作者更新库之前，你不必等待。

- Drew Noakes

gulpify已被弃用，建议直接使用"browserify"与"vinyl-source-stream"模块结合，或者如果您想使用插件的话，可以使用"gulp-browserify"。请注意，"gulp-browserify"在黑名单上。来源：https://www.npmjs.org/package/gulpify - ZeeCoder

@ZeeCoder，你所说的黑名单是什么意思？ - Giszmo

4

我明白了，这是需要翻译的内容：@Giszmo 我的意思是这个：https://github.com/gulpjs/plugins/blob/master/src/blackList.json - ZeeCoder

第二个对我很有用。运行得非常好。 :) 谢谢！ - danvitoriano

3

你可以尝试使用 browserify 转换器和uglifyify插件来压缩代码。请参考uglifyify。

- H23120

3

重要提示：看起来 uglifyify 已经不再维护，并且仍停留在已废弃的 Uglify v1 版本上。 - Evan Carroll

2

Uglifyify目前使用的是Uglify v2。也许它没有经常更新，但似乎并不必要，因为它只依赖于uglify-js包。 - inta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hafiz Ismail · Accepted Answer

你的解答其实已经非常接近了，只有一个问题：

你需要使用 vinyl-buffer 将 source() 返回的streaming的黑胶文件对象转换为buffered的黑胶文件对象，因为 gulp-uglify（以及大多数gulp插件）都是基于buffered的黑胶文件对象进行操作的。

所以你应该这样做：

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来代替，它会为您处理流式和缓冲的vinyl文件对象，像这样

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流、流化的vinyl文件对象和缓冲的vinyl文件对象之间进行转换）的问题。

编辑：我已经写了一篇更长的文章，介绍如何使用gulp+browserify以及不同的方法：https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623