How to uglify output with Browserify in Gulp?

您可以尝试浏览转换 丑化。

You actually got pretty close, except for one thing:

• 你需要用 vinyl-buffer转换 source()给出的 streaming乙烯基文件对象，因为 gulp-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'));
});

以上两种食谱都能达到同样的效果。

Its just about how you want to manage your pipes (converting between regular NodeJS Streams and streaming vinyl file objects and buffered vinyl file objects)

编辑: 我已经写了一篇更长的文章，关于如何使用 Gulp + Browserify 和不同的方法，地址是: < a href = “ https://medium.com/@sogko/Gulp-Browserify-the-gulp-y-way-bb359b3f9623”> https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

从 乙烯基源流 NPM 页面获取的另外两种方法:

Given:

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

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


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