¿Cómo mejorar la salida con Browserify en Gulp?

112

Intenté fechar la salida de Browserify en Gulp, pero no funciona.

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

Según tengo entendido, no puedo hacerlo en los pasos siguientes. ¿Necesito hacer en una tubería para preservar la secuencia?

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
fuente

Respuestas:

186

De hecho, te acercaste bastante, excepto por una cosa:

  • es necesario convertir la transmisión de archivos de vinilo objeto dado por source()la vinyl-buffercausa gulp-uglify(y la mayoría de los plugins trago) funciona para el buffer objetos de archivo de vinilo

Entonces tendrías esto en su lugar

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

O bien, puede optar por utilizar vinyl-transformen su lugar, que se encarga de la transmisión y los objetos de archivo de vinilo almacenados en búfer por usted, como tal

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

Ambas recetas anteriores lograrán lo mismo.

Se trata simplemente de cómo desea administrar sus tuberías (convertir entre secuencias NodeJS normales y objetos de archivo de vinilo en tiempo real y objetos de archivo de vinilo en búfer)

Editar: he escrito un artículo más largo sobre el uso de gulp + browserify y diferentes enfoques en: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Hafiz Ismail
fuente
La solución de transformación de vinilo da como resultado un paquete broswerificado para cada archivo en el glob, en lugar de un solo paquete para todos los archivos. @ hafiz-ismail ¿cómo se puede utilizar el enfoque de transformación de vinilo para crear un solo paquete?
Brian Leathem
@BrianLeathem: cada archivo del patrón glob será un archivo de entrada principal separado para browserify, y cada archivo de entrada resultará en un paquete separado. Si desea concatenar todas las salidas del paquete en un solo archivo, puede usarlo gulp-concaty agregarlo al final de su canalización de gulp. Eso será el equivalente a correr browserify <options> > single-file.jsen la terminal. Avísame si he respondido a tu pregunta. ¡Salud!
Hafiz Ismail
11
Hmm, creo que el segundo ejemplo con vinyl-transformya no funciona, ¿eh?
yckart
Con respecto a la transformación de vinilo: github.com/substack/node-browserify/issues/1198
Egon Olieux
¿Cómo preservar los avisos de derechos de autor en este escenario?
Pankaj
12

Dos enfoques adicionales, tomados de la página de NPM de flujo de fuente de vinilo :

Dado:

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

Enfoque 1 Uso de gulpify (obsoleto)

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

Método 2 Uso de flujo de fuente de vinilo

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

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

Un beneficio del segundo enfoque es que utiliza la API de Browserify directamente, lo que significa que no tiene que esperar a que los autores de gulpify actualicen la biblioteca antes de poder hacerlo.

Dibujó Noakes
fuente
"gulpify ha quedado obsoleto en favor del uso de" browserify "directamente en combinación con el módulo" vinyl-source-stream "o" gulp-browserify "si desea utilizar un complemento" Fuente: npmjs.org/package/gulpify También tenga en cuenta que "gulp-browserify" está en el blaclist.
ZeeCoder
@ZeeCoder ¿a qué te refieres con lista negra?
Giszmo
4
@Giszmo Me refiero a esto: github.com/gulpjs/plugins/blob/master/src/blackList.json
ZeeCoder
El segundo me resultó útil. Funciona de maravilla. :) ¡Tks!
dnvtrn
3

puede intentar transformar browserify uglifyify .

eihero
fuente
3
Notas importantes, parece que uglifyify no se mantiene y se atasca en Uglify v1, que está obsoleto.
Evan Carroll
2
Uglifyify actualmente usa Uglify v2. Tal vez no se actualice con tanta frecuencia, pero eso no parece ser necesario ya que solo depende del paquete uglify-js.
inta