Gulp에서 Browserify로 출력을 uglify하는 방법은 무엇입니까?

Gulp에서 Browserify의 출력을 uglify하려고했지만 작동하지 않습니다.

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

한 가지를 제외하고는 실제로 꽤 가까워졌습니다.

• with (및 대부분의 gulp 플러그인)가 버퍼링 된 비닐 파일 객체 에서 작동 하기 때문에 with에 의해 제공된 스트리밍 비닐 파일 객체 를 변환해야 합니다.source()vinyl-buffergulp-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 스트림과 스트리밍 비닐 파일 객체 및 버퍼링 된 비닐 파일 객체 간 변환).

편집 : 나는 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');

gulpify 사용 방법 1 (사용되지 않음)

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 transform uglifyify 시도 할 수 있습니다 .