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

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

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

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.

Sie können versuchen, browserify transform uglifyify .