如何使用Gulp中的Browserify uglify输出？ [英] How to uglify output with Browserify in Gulp?

问题描述

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

gulpfile.js
$ b

  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'））; 
}）; 
 $ b gulp.task（'default'，function（）{
 gulp.start（'browserify'，'scripts'）; 
}）; 
  

解决方案

您需要转换由 source（）给出的 streaming 乙烯基文件对象 / code>与乙烯基缓冲区因为 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'））//给出乙烯基流文件对象
 .pipe（buffer（））//< -----从流转换为缓冲乙烯文件对象
 .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（）{
 
 //使用`vinyl-transform`来包装由`b返回的常规ReadableStream。 bundle（）;`用乙烯基文件对象
 // //以便我们可以在乙烯管道中使用它
 // //同时照顾流媒体和缓冲的乙烯基文件对象
 var browserified =转换（函数（文件名）{
 //文件名='./source/scripts/app.js'在这种情况下
返回browserify（文件名）
 .bundle（）; 
 }）; 
 
 return gulp.src（['./ source / scripts / app.js']）//你也可以在这里使用glob模式来browserify-> uglify多个文件
 .pipe（browserified）
 .pipe（uglify（））
 .pipe（gulp.dest（'./ build / scripts'））; 
}）; 
  

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

它就是你想要如何管理你的管道（在普通的NodeJS Streams和流式乙烯文件对象和缓冲乙烯文件对象之间进行转换）

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

I tried to uglify output of Browserify in Gulp, but it doesn't work.

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

As I understand I cannot make it in steps as below. Do I need to make in one pipe to preserve the sequence?

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

解决方案

You actually got pretty close, except for one thing:

• you need to convert the streaming vinyl file object given by source() with vinyl-buffer because gulp-uglify (and most gulp plugins) works on buffered vinyl file objects

So you'd have this instead

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

Or, you can choose to use vinyl-transform instead which takes care of both streaming and buffered vinyl file objects for you, like so

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

Both of the above recipes will achieve the same thing.

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)

Edit: I've written a longer article regarding using gulp + browserify and different approaches at: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

这篇关于如何使用Gulp中的Browserify uglify输出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！