Як зменшити висновок за допомогою Browserfy в Gulp?

Я намагався зменшити вихід Browrify в 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');
});

Ви насправді зблизилися, за винятком однієї речі:

• вам потрібно конвертувати об'єкт потокового вінілового файлу, що задається source()з, vinyl-bufferтому що gulp-uglify(і більшість плагінів gulp) працює на буферизованих об'єктах вінілового файлу

Тож ви мали б це замість цього

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 + перегляду веб-сторінок та різних підходів на веб- сайті: 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'));
});

Однією з переваг другого підходу є те, що він використовує API Browrify безпосередньо, це означає, що вам не доведеться чекати авторів gulpify, щоб оновити бібліотеку, перш ніж ви зможете.

ви можете спробувати переглядати перетворення uglifyify .