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

私の理解では、次のような手順では作成できません。シーケンスを保持するために1つのパイプで作成する必要がありますか?

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

回答:


186

次の1つを除いて、実際にはかなり接近しています。

  • あなたは、変換する必要があるストリーミングによって与えられたビニールファイルオブジェクトsource()vinyl-bufferあるため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代わりに使用して、ストリーミングバッファリングされた 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ストリームとストリーミングビニールファイルオブジェクトとバッファされたビニールファイルオブジェクトとの間の変換)

編集:https ://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623で、gulp + browserifyとさまざまなアプローチの使用に関するより長い記事を書きました


ビニール変換ソリューションでは、すべてのファイルの単一のバンドルではなく、グロブ内の各ファイルの破棄されたバンドルが生成されます。@ hafiz-ismailビニール変換アプローチを使用して単一のバンドルを作成するにはどうすればよいですか?
Brian Leathem 14年

@BrianLeathem:globパターンの各ファイルはbrowserifyの個別のメインエントリファイルになり、各エントリファイルは個別のバンドルになります。すべてのバンドル出力を単一のファイルに連結したい場合は、それを使用gulp-concatしてgulpパイプラインの最後に追加できます。これはbrowserify <options> > single-file.jsターミナルで実行するのと同じです。私があなたの質問に答えたかどうか知らせてください。乾杯!
Hafiz Ismail

11
うーん、2つ目の例vinyl-transformはもう機能しないと思います。
yckart 2015


このシナリオで著作権情報を保持する方法は?
Pankaj

12

から取られた2つの追加のアプローチ 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');

アプローチ1 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'));
});

2番目のアプローチの利点の1つは、Browserify APIを直接使用することです。つまり、gulpifyの作成者がライブラリを更新するのを待つ必要がなくなります。


「gulpifyは非推奨になり、「browserify」を「vinyl-source-stream」モジュールと直接組み合わせて使用​​するか、または「gulp-browserify」をプラグインを使用する場合)ソース:npmjs.org/package/gulpify「gulp-browserify」がblaclistにあることにも注意してください。
ZeeCoder 2014

@ZeeCoderブラックリストとはどういう意味ですか?
Giszmo

4
@ギズモ私はこれを意味します:github.com/gulpjs/plugins/blob/master/src/blackList.json
ZeeCoder '

2つ目は私にとって便利でした。魅力のように機能します。:) Tks!
dnvtrn 2016

3

browserify transform uglifyifyを試すことができます。


3
重要な注意事項、uglifyifyはメンテナンスされておらず、廃止予定のUglify v1でスタックしているようです。
エヴァンキャロル

2
Uglifyifyは現在Uglify v2を使用しています。たぶんそれほど頻繁には更新されないかもしれませんが、uglify-jsパッケージに依存するだけなので、それは必要ではないようです。
2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.