Move browserify workflow into gulp task [vueify, browserify, babelify]

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.

Welcome to SO @HackMac, can you clearly state what the problem is? — ewitkows
– ewitkows, Commented Aug 16, 2016 at 2:04
I'm trying to do the same thing in much the same way (and failing). I'm basing my work on the vue cli default app with App.vue and Hello.vue. App.vue gets processed correctly while Hello.vue does not get processed at all by vueify despite being imported by App.vue. Have wasted quite a few hours trying to work this one out, so if you figured out the problem, I hope you don't mind sharing :) — LOAS
– LOAS, Commented Jan 2, 2017 at 8:23

LOAS · Accepted Answer · 2017-01-02 13:25:19Z

3

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.

answered Jan 2, 2017 at 13:25

LOAS

7,2922 gold badges31 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Move browserify workflow into gulp task [vueify, browserify, babelify]

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related