Gulp with browserify failing silently

Question

I have a project using Angular.js for which I created some gulp tasks a long while ago. I recently got a new computer and tried to run it but it silently failed (no errors in the log) on my browserify task.

gulp.task('imgs', ['html'], function () {
    return gulp.src(paths.img + '*')
        .pipe(gulp.dest(paths.dist_img));
});

gulp.task('browserify', ['imgs'], function () {
    return browserify(paths.src + 'index.js', {debug: true})
        .bundle()
        .pipe(source('index.js'))
        .pipe(gulpPlugins.rename('bundle.js'))
        .pipe(gulp.dest(paths.dist))
        .pipe(gulpPlugins.connect.reload());
});

gulp.task('copy-bootstrap-css', ['browserify'], function () {
    return gulp.src(paths.custom + "bootstrap/css/*.css")
         .pipe(gulp.dest(paths.dist_css));
});

I've been debugging this for a while and noticed it was not failing when I commented out either the rename-pipe or the dest-pipe of the browserify task. Obviously the application is not working correctly when I do. But I couldn't find an actual reason why.

Eventually in complete despair I created a separate variable for the browserify output and then applied the pipes:

gulp.task('browserify', ['imgs'], function () {
    var b = browserify(paths.src + 'index.js', {debug: true})
        .bundle();
    b.pipe(source('index.js'))
        .pipe(gulpPlugins.rename('bundle.js'))
        .pipe(gulp.dest(paths.dist))
        .pipe(gulpPlugins.connect.reload())
    return b;
});

Strangely enough that "fixes" it. Meaning that the gulp tasks at least execute completely. The browserify still hasn't run correctly I guess, because I get an "Unexpected end of input" in my browser on the bundle.js, but that might be also be another problem.

Does anyone have an idea why this is "working" when I use a separate variable for the browserify.bundle()? Any idea whether the remaining problem is related?

Since this might have something to do with versions: I've got the following gulpPlugins in my package.json and am running npm 6.4.1 and node 11.3.0 on my new machine.

"devDependencies": {
    "browserify": "^13.1.1",
    "chai": "^3.5.0",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-buffer": "0.0.2",
    "gulp-clean": "^0.3.2",
    "gulp-connect": "^5.0.0",
    "gulp-dest": "^0.2.3",
    "gulp-inject": "^4.2.0",
    "gulp-load-plugins": "^1.4.0",
    "gulp-rename": "^1.4.0",
    "gulp-rev-all": "^0.9.7",
    "gulp-rev-replace": "^0.4.3",
    "gulp-sass": "^3.1.0",
    "gulp-streamify": "^1.0.2",
    "gulp-util": "^3.0.7",
    "http-proxy-middleware": "^0.17.4",
    "mocha": "^3.2.0",
    "vinyl-source-stream": "^1.1.0"
}

Edit: When I manually browserify the index.js file this works without problems and the output is a massive file of 64k lines, while the one from my gulp tasks is only 1200.

Answer 1

I restructured the browserify-task and removed the rename, since the filename parameter in the vinyl-source-stream was already doing the renaming, I didn't really need it:

gulp.task('browserify', ['imgs'], function () {
    var b = browserify();
    b.add(paths.src + 'index.js', {debug: true});
    var textStream = b.bundle();
    textStream
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(paths.dist))
        .pipe(gulpPlugins.connect.reload())
    return b;
});

Note that simply removing the rename pipe and changing the filename of the source pipe didn't do the trick. That resulted in a "no such file or directory" error for some reason. I guess that's why I added the rename pipe in the first place.