Wie kann ich die Ausgabe mit Browserify in Gulp hässlich machen?

112

Ich habe versucht, die Ausgabe von Browserify in Gulp zu hässlich zu machen, aber es funktioniert nicht.

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

Soweit ich weiß, kann ich es nicht in den folgenden Schritten schaffen. Muss ich in einem Rohr machen, um die Reihenfolge beizubehalten?

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

Antworten:

186

Sie sind tatsächlich ziemlich nahe gekommen, bis auf eine Sache:

  • Sie müssen das Streaming- Vinyl-Dateiobjekt konvertieren, das von source()with angegeben wird, vinyl-bufferda gulp-uglify(und die meisten gulp-Plugins) mit gepufferten Vinyl- Dateiobjekten funktioniert

Also hättest du das stattdessen

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

Oder Sie können vinyl-transformstattdessen eine Option verwenden, die sowohl Streaming- als auch gepufferte Vinyl-Dateiobjekte für Sie übernimmt

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

Mit beiden oben genannten Rezepten wird dasselbe erreicht.

Es geht nur darum, wie Sie Ihre Pipes verwalten möchten (Konvertieren zwischen regulären NodeJS-Streams und Streaming von Vinyl-Dateiobjekten und gepufferten Vinyl-Dateiobjekten)

Bearbeiten: Ich habe einen längeren Artikel über die Verwendung von gulp + browserify und verschiedene Ansätze unter folgender Adresse geschrieben: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Hafiz Ismail
quelle
Die Vinyl-Transformationslösung führt zu einem broswerified Bundle für jede Datei im Glob und nicht zu einem einzigen Bundle für alle Dateien. @ hafiz-ismail Wie kann der Vinyl-Transformations-Ansatz verwendet werden, um ein einzelnes Bundle zu erstellen?
Brian Leathem
@BrianLeathem: Jede Datei aus dem Glob-Muster ist eine separate Haupteintragsdatei für browserify, und jede Eintragsdatei führt zu einem separaten Bundle. Wenn Sie alle Bundle-Ausgaben in einer einzigen Datei verketten möchten, können Sie sie verwenden gulp-concatund am Ende Ihrer gulp-Pipeline hinzufügen. Dies entspricht der Ausführung browserify <options> > single-file.jsim Terminal. Lassen Sie mich wissen, wenn ich Ihre Frage beantwortet habe. Prost!
Hafiz Ismail
11
Hmm, ich denke das zweite Beispiel mit vinyl-transformfunktioniert nicht mehr, oder?!
Yckart
In Bezug auf Vinyl-Transformation: github.com/substack/node-browserify/issues/1198
Egon Olieux
Wie werden die Copyright-Hinweise in diesem Szenario beibehalten?
Pankaj
12

Zwei zusätzliche Ansätze, die von der Vinyl-Source-Stream- NPM-Seite übernommen wurden:

Gegeben:

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

Ansatz 1 Verwenden von gulpify (veraltet)

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

Ansatz 2 Verwenden von 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'));
});

Ein Vorteil des zweiten Ansatzes besteht darin, dass die Browserify-API direkt verwendet wird. Sie müssen also nicht warten, bis die Autoren von gulpify die Bibliothek aktualisiert haben, bevor Sie können.

Drew Noakes
quelle
"gulpify" wurde zugunsten der Verwendung von "browserify" direkt in Kombination mit dem Modul "vinyl-source-stream" oder "gulp-browserify", wenn Sie ein Plugin verwenden möchten, verworfen. Quelle: npmjs.org/package/gulpify Beachten Sie auch, dass "gulp-browserify" auf der blaclist steht.
ZeeCoder
@ZeeCoder was meinst du mit schwarzer Liste?
Giszmo
Der zweite war nützlich für mich. Klappt wunderbar. :) Tks!
dnvtrn
3

Sie können versuchen, browserify transform uglifyify .

eihero
quelle
3
Wichtige Hinweise, es scheint, dass uglifyify nicht gewartet wird und auf Uglify v1 steckt, das veraltet ist.
Evan Carroll
2
Uglifyify verwendet derzeit Uglify v2. Vielleicht wird es nicht so häufig aktualisiert, aber das scheint nicht notwendig zu sein, da es nur vom uglify-js-Paket abhängt.
Inta