web-dev-qa-db-fra.com

Comment uglify la sortie avec Browserify dans Gulp?

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 le faire par étapes comme ci-dessous. Dois-je créer un tuyau 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');
});
javascriptnode.jsgulpbrowserifyuglifyjs
109
Nik Terentyev

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

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

Donc, vous auriez ceci à 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 vinyl-transform _ à la place, qui s'occupe des deux streaming et buffered des objets de fichier vinyle pour vous, comme si

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 vont réaliser la même chose.

C’est à peu près ce que vous voulez faire pour gérer vos tubes (conversion entre les flux NodeJS classiques et la lecture en continu d’objets de fichier vinyle et d’objets de fichier vinyle mis en mémoire tampon)

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

180
Hafiz Ismail

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

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  Utiliser 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.

12
Drew Noakes

vous pouvez essayer browserify transformer glify .

3
eihero