如何使用Gulp中的Browserify uglify输出？

我试图丑化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')); }); 

据我所知，我不能在下面的步骤。 我是否需要在一个pipe道中保存序列？

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

Answer 1

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

• 您需要将由source()给出的stream乙烯基文件对象与vinyl-buffer因为gulp-uglify （和大部分的gulp插件）可以在缓冲的乙烯基文件对象

所以你会有这个

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

或者，您可以select使用vinyl-transform而不是像您一样为您处理stream媒体和缓冲乙烯基文件对象

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

上述两个食谱都会达到同样的效果。

它只是关于如何pipe理你的pipe道（在普通的NodeJS Streams和stream式乙烯文件对象和缓冲乙烯文件对象之间进行转换）

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

Answer 2

另外两种方法，从乙烯来源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'); 

方法1 使用gulpify （已弃用）

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

方法2使用乙烯来源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的作者更新库才可以。

Answer 3

你可以尝试browserify转换uglifyify 。