Gulp and Browserify always giving “dest.write is not a function” error

问题

I'm trying to utilize Browserify in my Gulp file, but it seems no matter how I set things up, it always throws an error that reads "dest.write is not a function". I originally started with this task using gulp-concat:

gulp.task('scripts', function()
{
    return gulp.src(['src/shared/js/one.js', 'src/shared/js/two.js', 'src/shared/js/*.js'])
        .pipe(browserify()
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

When I commented out the browserify() line, everything worked fine. While Googling around for a solution to the error message, I found this page when someone linked to it, saying "the gulp docs rave about this solution" (here):

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');

gulp.task('browserify', function () {
  var browserified = transform(function(filename) {
    var b = browserify(filename);
    return b.bundle();
  });

  return gulp.src(['./src/*.js'])
    .pipe(browserified)
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});

I dug further, and read that vinyl-transform doesn't work with Browserify in this way because there is no write stream, and the preferred method was to use vinyl-source-stream instead. I'm now currently trying to use this proposed solution, but still getting the error:

gulp.task('scripts', function()
{
    return gulp.src(['src/shared/js/one.js', 'src/shared/js/two.js', 'src/shared/js/*.js'])
        .pipe(browserify('src/shared/js/*.js', {
            debug: true, 
            extensions: ['.js']
        }))
        .bundle()
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

Tweaking the browserify() reference in various ways has not changed anything. Can anyone tell me what I'm doing wrong?

回答1:

Here's the solution that worked for me in exactly same situation. I spent some time trying to make vinyl-transform work with browserify, without success, so had to revert to vinyl-source-stream and vinyl-buffer combination.

I used the following gist as a base reference for my code snippet: https://gist.github.com/stoikerty/cfa49330a9609f6f8d2d

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var uglify = require('gulp-uglify');

gulp.task('browserify', function () {
  var b = browserify({
    entries: './js/test.js', // Only need initial file, browserify finds the deps
    debug: true        // Enable sourcemaps
  });

  return b.bundle()
    .pipe(source('./js/test.js')) // destination file for browserify, relative to gulp.dest
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});

来源：https://stackoverflow.com/questions/40638497/gulp-and-browserify-always-giving-dest-write-is-not-a-function-error

标签

node.js

gulp

bundler

browserify

gulp-concat