Move browserify workflow into gulp task [vueify, b

Question

I'm trying to migrate the following browserify workflow into a single gulp task:

package.json:

"scripts": {
  "build": "browserify src/main.js > dist/build.js"
},
...
"browserify": {
  "transform": [
    "vueify",
    "babelify"
  ]
}

.babelrc file:

{
  "presets": ["es2015"]
}

Since gulp-browserify is now longer maintained, I used this recipe to get the whole workflow into a single gulp task:

gulp.task('build', function () {
    var b = browserify({
        entries: './src/main.js',
        debug: true,
        transform: [vueify, babelify.configure({presets: ["es2015"]})]
    });
    return b.bundle()
        .pipe(source('build.js'))
        .pipe(buffer())
        .on('error', gutil.log)
        .pipe(gulp.dest('./dist/'));
    });

Unfortunately, the generated build.js files are different and only the build.js file generated by the command npm run build is running my Vue.js App properly.

Answer 1

I just managed to get past this problem myself. After spending a bit of time in the debugger I found that the array of transforms used by browserify contained 'babelify' and 'vueify' twice.

What happens then is probably that the transforms are applied like so: bablify -> vueify -> babelify -> vueify. I didn't spend much time figuring out exactly how that blew up my stuff since the problem is easy enough to get rid of.

Either specify browserify transforms in package.json OR in your gulp file. Not both.