Jak uszlachetnić dane wyjściowe za pomocą Browserify w Gulp?

112

Próbowałem uglikować wyjście Browserify w Gulp, ale to nie działa.

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

Jak rozumiem, nie mogę zrobić tego w poniższych krokach. Czy muszę zrobić w jednej rurze, aby zachować sekwencję?

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');
});
Nik Terentyev
źródło

Odpowiedzi:

186

Właściwie byłeś całkiem blisko, z wyjątkiem jednej rzeczy:

  • musisz przekonwertować obiekt strumieniowego pliku winylu podany przez source()with, vinyl-bufferponieważ gulp-uglify(i większość wtyczek gulp) działa na buforowanych obiektach pliku winylu

Więc zamiast tego miałbyś to

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

Możesz też wybrać opcję, vinyl-transformktóra zajmie się zarówno przesyłaniem strumieniowym, jak i buforowanymi obiektami plików winylowych, na przykład

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

Obie powyższe przepisy pozwolą osiągnąć to samo.

Chodzi o to, jak chcesz zarządzać swoimi potokami (konwertowanie między zwykłymi strumieniami NodeJS i strumieniowymi obiektami plików winylowych i buforowanymi obiektami plików winylowych)

Edycja: napisałem dłuższy artykuł na temat używania gulp + browserify i różnych podejść pod adresem : https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Hafiz Ismail
źródło
Rozwiązanie do transformacji winylu daje w wyniku zarchiwizowany pakiet dla każdego pliku w globie, a nie pojedynczy pakiet dla wszystkich plików. @ hafiz-ismail jak można wykorzystać metodę transformacji winylu do utworzenia pojedynczego pakietu?
Brian Leathem,
@BrianLeathem: każdy plik ze wzorca glob będzie oddzielnym głównym plikiem wejściowym dla browserify, a każdy plik wejściowy będzie miał oddzielny pakiet. Jeśli chcesz połączyć wszystkie wyjścia pakunku w jeden plik, możesz użyć go gulp-concati dodać na końcu potoku łykowego. To będzie odpowiednik uruchomienia browserify <options> > single-file.jsw terminalu. Daj mi znać, jeśli odpowiedziałem na Twoje pytanie. Twoje zdrowie!
Hafiz Ismail
11
Hmm, myślę, że drugi przykład z vinyl-transformjuż nie działa, co ?!
yckart
Odnośnie transformacji winylu: github.com/substack/node-browserify/issues/1198
Egon Olieux
Jak zachować informacje o prawach autorskich w tym scenariuszu?
Pankaj
12

Dwa dodatkowe podejścia zaczerpnięte ze strony NPM ze źródła winyli :

Dany:

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

Podejście 1 Korzystanie z gulpify (przestarzałe)

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

Podejście 2 Korzystanie ze strumienia źródłowego winylu

gulp.task('browserify', function() {
  var bundleStream = browserify('index.js').bundle();

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('./bundle.js'));
});

Jedną z zalet drugiego podejścia jest to, że używa bezpośrednio interfejsu API Browserify, co oznacza, że ​​nie musisz czekać, aż autorzy Gulpify zaktualizują bibliotekę, zanim będzie to możliwe.

Drew Noakes
źródło
„Gulpify” zostało wycofane na korzyść używania „browserify” bezpośrednio w połączeniu z modułem „vinyl-source-stream” lub „gulp-browserify”, jeśli chcesz użyć wtyczki. Źródło: npmjs.org/package/gulpify Zauważ również, że "gulp-browserify" znajduje się na czarnej liście.
ZeeCoder
@ZeeCoder co masz na myśli mówiąc o czarnej liście?
Giszmo
4
@Giszmo Mam na myśli to: github.com/gulpjs/plugins/blob/master/src/blackList.json
ZeeCoder
Drugi był dla mnie przydatny. Działa jak marzenie. :) Tks!
dnvtrn
3

możesz spróbować browserify, transform uglifyify .

eihero
źródło
3
Ważne uwagi, wygląda na to, że Uglifyify nie jest utrzymywane i utknęło na Uglify v1, które jest przestarzałe.
Evan Carroll
2
Uglifyify obecnie używa Uglify v2. Może nie jest aktualizowany tak często, ale nie wydaje się to być konieczne, ponieważ zależy to tylko od pakietu uglify-js.
inta