How can I uglify my bundle files for React with gulp?

Question

I have a gulp file set up and I have properly minified all of my scripts and css files with the exception of my bundle.jsand my homeBundle.js. I have the uglify() function running in each one of my tasks, but receive the following error when I try to gulp.

events.js:141 throw er; // Unhandled 'error' event ^ Error: /Users/Documents/RTVS360/bundle.js: Streaming not supported

Is there an issue when gulp tries to uglify because it recreates the file every time gulp is ran?

Below you can see my gulpfile. Any help would be gladly appreciated.

var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
var glob = require('glob');
var streamify = require('gulp-streamify');

gulp.task('watchify', function () {
    var bundler = browserify({
        entries: ['./client/main.jsx'],
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    var watcher = watchify(bundler);

    return watcher
        .on('update', function () {
            watcher.bundle()
                .on('error', function (err) {
                    console.log('There was an error compiling the components.', err.message);
                })
                .pipe(source('bundle.js'))
                .pipe(gulp.dest('./dest/'));
        })
        .bundle()
        .on('error', function (err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dest/'));
});

gulp.task('browserify', function () {
    var testFiles = glob.sync('./client/main.jsx');
    var bundler = browserify({
        entries: testFiles,
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    function rebundle() {
        bundler
        .bundle()
        .on('error', function(err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('bundle.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/'));
    }
    return rebundle();
});

gulp.task('home', function () {

    var testFiles = glob.sync('./client/homepage.jsx');
    var bundler = browserify({
        entries: testFiles,
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    function rebundle() {
        bundler
        .bundle()
        .on('error', function(err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('homeBundle.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/'));
    }

    return rebundle();
});


// Uglify Scripts
gulp.task('scripts', function() {
    gulp.src('assets/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});

// Minify Styles
gulp.task('styles', function() {
  gulp.src('./assets/css/**/*.css')
    .pipe(uglifycss({
      "max-line-len": 80
    }))
    .pipe(gulp.dest('./dist/css'));
});


gulp.task('default', ['browserify', 'home','scripts', 'styles']);

Answer 1

You need to use streamify together with gulp-uglify.

It seems you are importing the streamify plugin, but you are not using it. You should wrap your uglify calls with a streamify function. Example:

var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');

gulp.task('watchify', function () {
    var bundler = browserify({
        entries: ['main.jsx'],
        transform: [reactify],

        // You probably would like to change these two flags to false for
        // production since they increase the size of your output file
        debug: true,
        fullPaths: true,

        cache: {},
        packageCache: {}
    });

    var watcher = watchify(bundler);

    return watcher
        .on('update', function () {
            watcher.bundle()
                .on('error', function (err) {
                    console.log('There was an error compiling the components.', err.message);
                })
                .pipe(source('bundle.js'))
                .pipe(streamify(uglify()))
                .pipe(gulp.dest('./dest/'));
        })
        .bundle()
        .on('error', function (err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('bundle.js'))
        .pipe(streamify(uglify())) // wrap uglify with the streamify plugin
        .pipe(gulp.dest('./dest/'));
});

gulp.task('default', ['watchify']);

Gulp-uglify does not support streaming vinyl file objects by itself so you need to use the streamify plugin to make it support streams.