Comment uglifier la sortie avec Browserify dans Gulp?


112

J'ai essayé de modifier la sortie de Browserify dans Gulp, mais cela ne fonctionne pas.

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

Si je comprends bien, je ne peux pas effectuer les étapes ci-dessous. Dois-je créer dans un seul tube pour conserver la séquence?

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

Réponses:


186

Vous êtes en fait assez proche, sauf pour une chose:

  • vous devez convertir l' objet de fichier vinyle en streaming donné par source()avec vinyl-buffercar gulp-uglify(et la plupart des plugins gulp) fonctionne sur des objets de fichier vinyle tamponnés

Alors tu aurais ça à la place

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

Ou, vous pouvez choisir d'utiliser à la vinyl-transformplace ce qui prend en charge à la fois les objets de fichier vinyle en streaming et tamponné pour vous, comme ceci

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

Les deux recettes ci-dessus permettront d'obtenir la même chose.

Il s'agit à peu près de la façon dont vous voulez gérer vos tuyaux (conversion entre les flux NodeJS normaux et les objets de fichier vinyle en streaming et les objets de fichier vinyle tamponné)

Edit: J'ai écrit un article plus long concernant l'utilisation de gulp + browserify et différentes approches à: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623


La solution de transformation de vinyle se traduit par un bundle broswerified pour chaque fichier du glob, plutôt qu'un seul bundle pour tous les fichiers. @ hafiz-ismail comment utiliser l'approche de la transformation de vinyle pour créer un seul bundle?
Brian Leathem

@BrianLeathem: chaque fichier du modèle glob sera un fichier d'entrée principal distinct pour browserify, et chaque fichier d'entrée donnera lieu à un ensemble séparé. Si vous souhaitez concaténer toutes les sorties du bundle dans un seul fichier, vous pouvez l'utiliser gulp-concatet l'ajouter à la fin de votre pipeline gulp. Ce sera l'équivalent de courir browserify <options> > single-file.jsen terminal. Faites-moi savoir si j'ai répondu à votre question. À votre santé!
Hafiz Ismail

11
Hmm, je pense que le deuxième exemple avec vinyl-transformne fonctionne plus, hein?!
yckart


Comment conserver les avis de droits d'auteur dans ce scénario?
Pankaj

12

Deux approches supplémentaires, tirées de la page NPM vinyl-source-stream :

Donné:

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

Approche 1 Utilisation de gulpify (obsolète)

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

Approche 2 Utilisation de vinyl-source-stream

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

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

L'un des avantages de la deuxième approche est qu'elle utilise directement l'API Browserify, ce qui signifie que vous n'avez pas à attendre que les auteurs de gulpify mettent à jour la bibliothèque avant de pouvoir.


"gulpify est obsolète au profit de l'utilisation de" browserify "directement en combinaison avec le module" vinyl-source-stream ", ou" gulp-browserify "si vous souhaitez utiliser un plugin" Source: npmjs.org/package/gulpify Notez également que «gulp-browserify» est sur la liste blanche.
ZeeCoder

@ZeeCoder qu'entendez-vous par liste noire?
Giszmo


Le second m'a été utile. Fonctionne comme un charme. :) Tks!
dnvtrn

3

vous pouvez essayer browserify transformer uglifyify .


3
Notes importantes, il semble que uglifyify n'est pas maintenu et bloqué sur Uglify v1 qui est obsolète.
Evan Carroll

2
Uglifyify utilise actuellement Uglify v2. Peut-être qu'il n'est pas mis à jour aussi fréquemment, mais cela ne semble pas nécessaire car cela dépend juste du paquet uglify-js.
entre le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.