Bagaimana cara membuat uglify output dengan Browserify di Gulp?

Saya mencoba untuk memperburuk keluaran Browserify di Gulp, tetapi tidak berhasil.

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

Seperti yang saya pahami, saya tidak bisa membuatnya dalam langkah-langkah seperti di bawah ini. Apakah saya perlu membuat dalam satu pipa untuk mempertahankan urutannya?

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

Anda sebenarnya cukup dekat, kecuali untuk satu hal:

• Anda perlu mengkonversi mengalir file objek vinyl yang diberikan oleh source()dengan vinyl-bufferkarena gulp-uglify(dan paling plugin tegukan) bekerja pada buffer file objek vinyl

Jadi Anda akan memiliki ini sebagai gantinya

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

Atau, Anda dapat memilih untuk menggunakan vinyl-transformsebagai gantinya yang menangani streaming dan objek file vinil yang di- buffer untuk Anda, seperti itu

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

Kedua resep di atas akan mencapai hal yang sama.

Ini hanya tentang bagaimana Anda ingin mengelola pipa Anda (mengubah antara NodeJS Stream biasa dan streaming objek file vinyl dan objek file vinyl buffer)

Sunting: Saya telah menulis artikel yang lebih panjang tentang menggunakan gulp + browserify dan pendekatan yang berbeda di: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Dua pendekatan tambahan, diambil dari halaman NPM aliran sumber vinil :

Diberikan:

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

Pendekatan 1 Menggunakan gulpify (tidak digunakan lagi)

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

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

Salah satu keuntungan dari pendekatan kedua adalah ia menggunakan API Browserify secara langsung, yang berarti Anda tidak perlu menunggu penulis gulpify untuk memperbarui pustaka sebelum Anda bisa.

Anda dapat mencoba browserify transform uglifyify .