如何在Gulp中使用Browserify丑化输出?


112

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

Answers:


186

您实际上非常接近,只有一件事:

  • 您需要转换with 给定的流式乙烯基文件对象source()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'));
});

或者,您可以选择使用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


乙烯基转换解决方案会为全球文件中的每个文件生成一个经过broswerized的捆绑包,而不是为所有文件提供一个捆绑包。@ hafiz-ismail如何使用乙烯基转换方法创建单个束?
Brian Leathem

@BrianLeathem:来自glob模式的每个文件将是用于browserify的单独的主条目文件,并且每个条目文件将产生单独的包。如果要将所有捆绑软件输出连接到一个文件中,可以使用gulp-concat并将其添加到gulp管道的末尾。这相当于browserify <options> > single-file.js在终端中运行。让我知道我是否回答了您的问题。干杯!
哈菲兹·伊斯梅尔

11
嗯,我想第二个例子vinyl-transform不再起作用了,是吗?
yckart


在这种情况下如何保留版权声明?
Pankaj '18年

12

乙烯基来源流 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的作者就可以更新库。


“不赞成使用gulpify,而建议直接将“ browserify”与“ vinyl-source-stream”模块结合使用;如果您想使用插件,则选择“ gulp-browserify ”。来源:npmjs.org/package/gulpify还要注意,“ gulp-browserify”在blaclist上。
ZeeCoder 2014年

@ZeeCoder黑名单是什么意思?
Giszmo 2015年


第二个对我有用。奇迹般有效。:) Tks!
dnvtrn

3

您可以尝试将browserify转换为uglifyify


3
重要说明,似乎uglifyify无法维护,并且卡在不推荐使用的Uglify v1上。
埃文·卡罗尔

2
Uglifyify当前使用Uglify v2。也许它没有那么频繁地更新,但这似乎没有必要,因为它仅取决于uglify-js包。
2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.