javascript - serve - install gulp windows

¿Cómo se puede uglificar la salida con Browserify en Gulp?

Question

Traté de uglify 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''));
});

Como entiendo, no puedo hacerlo en los pasos que se muestran a continuación. ¿Debo hacer 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'');
});

Answer 1

Dos enfoques adicionales, tomados de la página de NPM vinyl-source-stream :

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

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

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

Answer 2

En realidad te acercaste bastante, excepto por una cosa:

• necesita convertir el objeto de archivo de vinilo de transmisión proporcionado por source() con vinyl-buffer porque gulp-uglify (y la mayoría de los plugins gulp) funciona en objetos de archivos de vinilo almacenados en búfer

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 usar vinyl-transform que se ocupa de la transmisión y de los objetos de archivos de vinilo amortiguados para usted, como por ejemplo

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.

Es solo acerca de cómo quieres administrar tus tuberías (convirtiendo entre las corrientes NodeJS normales y los objetos de transmisión de archivos de vinilo y los objetos de archivo de vinilo amortiguado)

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

Answer 3

puedes probar con browserify transformar uglifyify .