Как очистить вывод с помощью Browserify в 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');
});

Ответ 1

На самом деле вы довольно близко, за исключением одного:

вам нужно преобразовать потоковый файл винилового файла, указанный 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

Ответ 2

Два дополнительных подхода, взятых из vinyl-source-stream Страница 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'));
});

Забастовкa >

Подход 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 Browserify, что означает, что вам не нужно ждать, пока авторы gulpify не смогут обновить библиотеку, прежде чем вы сможете.

Ответ 3

вы можете попробовать перепрофилировать преобразование uglifyify.