Làm cách nào để xác định đầu ra với Browserify trong Gulp?

Tôi đã cố gắng xóa đầu ra của Browserify trong Gulp, nhưng nó không hoạt động.

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

Như tôi hiểu, tôi không thể thực hiện theo các bước như dưới đây. Tôi có cần tạo trong một đường ống để bảo toàn trình tự không?

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

Bạn thực sự đã đến khá gần, ngoại trừ một điều:

• bạn cần phải chuyển đổi các luồng đối tượng tập tin vinyl do source()với vinyl-buffervì gulp-uglify(và hầu hết các plugins ngụm) hoạt động trên đệm đối tượng tập tin vinyl

Vì vậy, bạn sẽ có cái này thay thế

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

Hoặc, bạn có thể chọn sử dụng vinyl-transformthay thế để xử lý cả các đối tượng tệp vinyl có bộ đệm và phát trực tuyến cho bạn, như vậy

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

Cả hai công thức trên sẽ đạt được điều tương tự.

Nó chỉ là về cách bạn muốn quản lý đường ống của mình (chuyển đổi giữa các Luồng NodeJS thông thường và các đối tượng tệp vinyl trực tuyến và các đối tượng tệp vinyl được đệm)

Chỉnh sửa: Tôi đã viết một bài viết dài hơn về việc sử dụng gulp + Browserify và các cách tiếp cận khác nhau tại: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Hai cách tiếp cận bổ sung, được lấy từ trang NPM nguồn phát trực tuyến vinyl :

Được:

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

Phương pháp 1 Sử dụng gulpify (không được dùng nữa)

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

Phương pháp 2 Sử dụng 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'));
});

Một lợi ích của cách tiếp cận thứ hai là nó sử dụng API Browserify trực tiếp, nghĩa là bạn không phải đợi tác giả của gulpify cập nhật thư viện trước khi bạn có thể.

bạn có thể thử chuyển đổi Browserify uglifyify .