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

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

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.

vous pouvez essayer browserify transformer uglifyify .