Bagaimana cara membuat uglify output dengan Browserify di Gulp?

112

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

Jawaban:

186

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

Hafiz Ismail
sumber
Solusi transformasi vinil menghasilkan bundel broswerified untuk setiap file di glob, bukan satu bundel untuk semua file. @ hafiz-ismail bagaimana pendekatan vinyl-transform digunakan untuk membuat satu bundel?
Brian Leathem
@BrianLeathem: setiap file dari pola glob akan menjadi file entri utama yang terpisah untuk browserify, dan setiap file entri akan menghasilkan bundel terpisah. Jika Anda ingin menggabungkan semua output bundel menjadi satu file, Anda dapat menggunakan gulp-concatdan menambahkannya ke ujung pipeline gulp Anda. Itu akan sama dengan menjalankan browserify <options> > single-file.jsdi terminal. Beri tahu saya jika saya menjawab pertanyaan Anda. Bersulang!
Hafiz Ismail
11
Hmm, saya pikir contoh kedua dengan vinyl-transformtidak berfungsi lagi, eh ?!
yckart
Mengenai vinyl-transform: github.com/substack/node-browserify/issues/1198
Egon Olieux
Bagaimana cara mempertahankan pemberitahuan hak cipta dalam skenario ini?
Pankaj
12

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.

Drew Noakes
sumber
"gulpify tidak lagi digunakan karena menggunakan" browserify "secara langsung dalam kombinasi dengan modul" vinyl-source-stream ", atau" gulp-browserify "jika Anda ingin menggunakan plugin" Sumber: npmjs.org/package/gulpify Perhatikan juga bahwa "gulp-browserify" ada di daftar hitam.
ZeeCoder
@ZeeCoder apa yang Anda maksud dengan daftar hitam?
Giszmo
4
@Giszmo Maksud saya ini: github.com/gulpjs/plugins/blob/master/src/blackList.json
ZeeCoder
Yang kedua berguna bagi saya. Bekerja seperti pesona. :) Tks!
dnvtrn
3

Anda dapat mencoba browserify transform uglifyify .

eihero
sumber
3
Catatan penting, tampaknya uglifyify tidak dipertahankan dan macet di Uglify v1 yang sudah tidak digunakan lagi.
Evan Carroll
2
Uglifyify saat ini menggunakan Uglify v2. Mungkin tidak terlalu sering diupdate, tapi sepertinya itu tidak diperlukan karena ini hanya tergantung pada paket uglify-js.
inta