Gulp'ta Browserify ile çıktı nasıl çirkinleştirilir?

Gulp'ta Browserify çıktısını çirkinleştirmeye çalıştım ama işe yaramıyor.

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

Anladığım kadarıyla aşağıdaki adımlarla yapamıyorum. Sırayı korumak için tek bir boruda yapmam gerekir mi?

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

Aslında bir şey dışında oldukça yaklaştınız:

• dönüştürmek için gereken akışı verdiği vinil dosya nesnesi source()ile vinyl-bufferçünkü gulp-uglifyçalışır (ve çoğu gulp eklentileri) tamponlu vinil dosya nesneleri

Yani bunun yerine buna sahipsin

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

Veya, kullanmayı tercih edebilirsiniz vinyl-transformhem ilgilenir hangi yerine akışı ve tamponlu şöyle, sizin için vinil dosya nesneleri

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

Yukarıdaki tariflerin her ikisi de aynı şeyi başaracaktır.

Bu, borularınızı nasıl yönetmek istediğinizle ilgilidir (normal NodeJS Akışları arasında dönüştürme ve vinil dosya nesneleri ve arabelleğe alınmış vinil dosya nesneleri arasında dönüştürme)

Düzenleme: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623 adresinde gulp + tarayıcı ve farklı yaklaşımların kullanımına ilişkin daha uzun bir makale yazdım

Vinil kaynak akışı NPM sayfasından alınan iki ek yaklaşım :

Verilen:

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

Yaklaşım 1 Gulpify kullanma (kullanımdan kaldırıldı)

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

Yaklaşım 2 Vinil kaynak akışını kullanma

gulp.task('browserify', function() {
  var bundleStream = browserify('index.js').bundle();

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('./bundle.js'));
});

İkinci yaklaşımın bir yararı, Browserify API'sini doğrudan kullanmasıdır, yani gulpify yazarlarının siz yapmadan önce kitaplığı güncellemesini beklemenize gerek yoktur.

browsererify transform uglifyify'ı deneyebilirsiniz .