Come ridurre l'output con Browserify in Gulp?


112

Ho provato a ridurre l'output di Browserify in Gulp, ma non funziona.

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

Da quanto ho capito, non posso farlo nei passaggi seguenti. Devo fare un tubo per preservare la sequenza?

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

Risposte:


186

In realtà ti sei avvicinato molto, tranne per una cosa:

  • devi convertire l' oggetto file in vinile in streaming fornito da source()con vinyl-bufferperché gulp-uglify(e la maggior parte dei plugin gulp) funziona su oggetti file in vinile con buffer

Quindi avresti questo invece

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

Oppure, puoi scegliere di utilizzare vinyl-transforminvece che si prende cura degli oggetti di file in vinile sia in streaming che bufferizzati per te, in questo modo

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

Entrambe le ricette di cui sopra otterranno la stessa cosa.

È proprio come vuoi gestire i tuoi tubi (conversione tra normali flussi NodeJS e oggetti di file di vinile in streaming e oggetti di file di vinile con buffer)

Modifica: ho scritto un articolo più lungo sull'utilizzo di gulp + browserify e approcci diversi su: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623


La soluzione di trasformazione del vinile si traduce in un bundle broswerified per ogni file nel glob, piuttosto che un unico bundle per tutti i file. @ hafiz-ismail come può essere utilizzato l'approccio della trasformazione del vinile per creare un singolo bundle?
Brian Leathem,

@BrianLeathem: ogni file dal modello glob sarà un file di ingresso principale separato per browserify e ogni file di ingresso risulterà in un pacchetto separato. Se vuoi concatenare tutti gli output del bundle in un unico file, puoi usarlo gulp-concate aggiungerlo alla fine della tua pipeline gulp. Sarà l'equivalente dell'esecuzione browserify <options> > single-file.jsnel terminale. Fammi sapere se ho risposto alla tua domanda. Saluti!
Hafiz Ismail

11
Hmm, penso che il secondo esempio con vinyl-transformnon funzioni più, eh ?!
yckart

Per quanto riguarda la trasformazione del vinile: github.com/substack/node-browserify/issues/1198
Egon Olieux,

Come preservare le note sul copyright in questo scenario?
Pankaj

12

Due ulteriori approcci, presi dal vinile-sorgente-stream pagina NPM :

Dato:

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

Approccio 1 utilizzando gulpify (obsoleto)

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

Approccio 2 Utilizzo del vinile-sorgente-stream

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

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

Un vantaggio del secondo approccio è che utilizza direttamente l'API Browserify, il che significa che non devi aspettare che gli autori di gulpify aggiornino la libreria prima di poterlo fare.


"gulpify è stato deprecato a favore dell'utilizzo di" browserify "direttamente in combinazione con il modulo" vinyl-source-stream "o" gulp-browserify "se desideri utilizzare un plug-in" Fonte: npmjs.org/package/gulpify Notare inoltre che "gulp-browserify" è sulla blaclist.
ZeeCoder

@ZeeCoder cosa intendi per lista nera?
Giszmo


Il secondo mi è stato utile. Funziona come un fascino. :) Tks!
dnvtrn

3

puoi provare browserify trasformare uglifyify .


3
Note importanti, sembra che uglifyify non sia mantenuto e bloccato su Uglify v1 che è deprecato.
Evan Carroll

2
Uglifyify attualmente utilizza Uglify v2. Forse non viene aggiornato così frequentemente, ma ciò non sembra essere necessario in quanto dipende solo dal pacchetto uglify-js.
inta
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.