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

Lesezeit: 4 Minuten

Benutzer-Avatar
Nik Terentjew

Ich habe versucht, die Ausgabe von Browserify in Gulp zu verfälschen, 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'));
});

Wie ich verstehe, kann ich es nicht in Schritten wie unten machen. Muss ich in einer Pipe machen, um die Sequenz 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');
});

Benutzer-Avatar
Hafiz Ismail

Du bist tatsächlich ziemlich nah dran gewesen, bis auf eine Sache:

  • die musst du umwandeln Streamen Vinyldateiobjekt gegeben von source() mit vinyl-buffer Weil gulp-uglify (und die meisten Schluck-Plugins) funktioniert gepuffert Vinyl-Datei-Objekte

Also hättest du stattdessen das hier

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 sich für die Verwendung entscheiden vinyl-transform stattdessen, die sich um beides kümmert Streamen und gepuffert Vinyl-Datei-Objekte für Sie, 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'));
});

Beide der oben genannten Rezepte werden dasselbe erreichen.

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

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

  • Die Vinyl-Transformationslösung führt zu einem broswerifizierten Bündel für jede Datei im Glob, anstatt zu einem einzelnen Bündel für alle Dateien. @hafiz-ismail Wie kann der Vinyl-Transformationsansatz verwendet werden, um ein einzelnes Bundle zu erstellen?

    – Brian Leatherem

    5. November 2014 um 22:01 Uhr

  • @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 verwenden gulp-concat und fügen Sie es am Ende Ihrer Gulp-Pipeline hinzu. Das wird dem Laufen gleichkommen browserify <options> > single-file.js im Endgerät. Lassen Sie mich wissen, ob ich Ihre Frage beantwortet habe. Prost!

    – Hafiz Ismail

    6. November 2014 um 6:56 Uhr

  • Hmm, ich denke das zweite Beispiel mit vinyl-transform geht nicht mehr oder?!

    – yckart

    7. August 2015 um 22:17 Uhr

  • Bezüglich Vinyl-Transformation: github.com/substack/node-browserify/issues/1198

    – Egon Oleux

    5. September 2016 um 0:37 Uhr

  • Wie können die Urheberrechtshinweise in diesem Szenario beibehalten werden?

    – Pankaj

    31. August 2018 um 18:05 Uhr

Benutzer-Avatar
Zeichnete Noakes

Zwei weitere Ansätze, entnommen aus der Vinyl-Quelle-Stream NPM-Seite:

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 Gulpify verwenden (veraltet)

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

Ansatz 2 Verwendung 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 er die Browserify-API direkt verwendet, was bedeutet, dass Sie nicht warten müssen, bis die Autoren von gulpify die Bibliothek aktualisieren, bevor Sie dies können.

  • „gulpify wurde zugunsten der Verwendung von „browserify“ direkt in Kombination mit dem Modul „vinyl-source-stream“ oder „gulp-browserify“ abgelehnt, wenn Sie ein Plugin verwenden möchten“ Quelle: npmjs.org/package/gulpify Beachten Sie auch, dass “gulp-browserify” auf der Blacklist steht.

    – ZeeCoder

    1. Dezember 2014 um 10:36 Uhr

  • @ZeeCoder was meinst du mit Blacklist?

    – Giszmo

    5. Juni 2015 um 20:53 Uhr

  • @Giszmo Ich meine das: github.com/gulpjs/plugins/blob/master/src/blackList.json

    – ZeeCoder

    6. Juni 2015 um 23:05 Uhr


  • Der zweite war nützlich für mich. Klappt wunderbar. 🙂 Tks!

    – dnvtrn

    28. Dezember 2016 um 16:39 Uhr

Sie können die Browserify-Transformation versuchen hässlich machen.

  • Wichtige Hinweise, es scheint, dass uglifyify nicht gewartet wird und auf Uglify v1 hängen bleibt, das veraltet ist.

    – Evan Caroll

    13. Januar 2015 um 21:19 Uhr

  • 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.

    – int

    9. Juli 2015 um 21:16 Uhr

1227720cookie-checkWie kann man die Ausgabe mit Browserify in Gulp hässlich machen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy