วิธี uglify เอาต์พุตด้วย Browserify in Gulp

ฉันพยายามอัปเกรดผลลัพธ์ของ Browserify ใน Gulp แต่ไม่ได้ผล

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

ตามที่ฉันเข้าใจฉันไม่สามารถทำได้ตามขั้นตอนด้านล่างนี้ ฉันต้องทำในท่อเดียวเพื่อรักษาลำดับไว้หรือไม่?

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

คุณเข้าใกล้ได้ดีจริงๆยกเว้นสิ่งหนึ่ง:

• คุณต้องแปลงสตรีมมิ่งไฟล์ object ไวนิลที่กำหนดโดยsource()มีvinyl-bufferเพราะgulp-uglify(และส่วนใหญ่ปลั๊กอินอึก) ทำงานบนบัฟเฟอร์วัตถุไฟล์ไวนิล

คุณจะได้สิ่งนี้แทน

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

หรือคุณสามารถเลือกใช้vinyl-transformแทนซึ่งดูแลทั้งสตรีมมิ่งและออบเจ็กต์ไฟล์ไวนิลที่บัฟเฟอร์ให้คุณก็ได้เช่นกัน

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

ทั้งสองสูตรข้างต้นจะบรรลุสิ่งเดียวกัน

เกี่ยวกับวิธีที่คุณต้องการจัดการไปป์ของคุณ (การแปลงระหว่าง NodeJS Streams ปกติและการสตรีมวัตถุไฟล์ไวนิลและวัตถุไฟล์ไวนิลที่บัฟเฟอร์)

แก้ไข: ฉันได้เขียนบทความที่ยาวขึ้นเกี่ยวกับการใช้ gulp + browserify และวิธีการต่างๆที่: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

วิธีการเพิ่มเติมอีกสองวิธีที่นำมาจากหน้า NPM ของสตรีมไวนิล :

ได้รับ:

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

แนวทางที่ 1 การใช้ gulpify (เลิกใช้แล้ว)

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

แนวทางที่ 2การใช้ไวนิล - ซอร์ส - สตรีม

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

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

ข้อดีอย่างหนึ่งของแนวทางที่สองคือใช้ Browserify API โดยตรงซึ่งหมายความว่าคุณไม่ต้องรอให้ผู้เขียน gulpify อัปเดตไลบรารีก่อนจึงจะทำได้

คุณอาจลองเปลี่ยน browserify uglifyify