Gulp에서 Browserify를 사용하여 출력을 Uglify하는 방법은 무엇입니까?

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

---

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

• 당신은 변환 할 필요가 스트리밍 에 의해 주어진 비닐 파일 객체 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'));
});

위의 두 가지 레시피는 모두 동일한 것을 달성합니다.

Its just about how you want to manage your pipes (converting between regular NodeJS Streams and streaming vinyl file objects and buffered vinyl file objects)

Edit: I've written a longer article regarding using gulp + browserify and different approaches at: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

---

Two additional approaches, taken from the vinyl-source-stream NPM page:

Given:

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

Approach 1 Using gulpify (deprecated)

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

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

One benefit of the second approach is that it uses the Browserify API directly, meaning that you don't have to wait for the authors of gulpify to update the library before you can.

---

you may try browserify transform uglifyify.

참고URL : https://stackoverflow.com/questions/24992980/how-to-uglify-output-with-browserify-in-gulp