How do I get a simple Vue compilation going in Gulp?

Question

I already use gulp in my workflow, and I don't currently use webpack or browserify, but it seems that compiling Vue 2.x components requires one or the other, there are no actively-maintained mechanisms for compiling Vue components directly as gulp tasks.

I've searched and can't seem to find a working reference for simply compiling a directory with *.vue components into a single JavaScript file that I can then link from my pages. I just want to create and use some components, I'm not creating SPAs.

Here's what I have:

gulpfile.js

const scriptDestFolder = "\\foo\\";
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const gulp = require("gulp");
const vueify = require('vueify');

gulp.task('vue', function () {
    return browserify({ 
                entries: ['./vuecomponents.js'],
                transform: [vueify]
        })
        .bundle()
        .pipe(source('vue-bundle.js'))
        .pipe(gulp.dest(scriptDestFolder));
});

vuecomponents.js

var Vue = require('vue');
var App = require('./vue/app.vue');

The app.vue file is the same as the example here. I have no intention of actually having an "app" component, I'm just trying to get a sample going, I would replace this with a list of my single-file components.

And here's the result:

Error: Parsing file \\blah\vue\app.vue:
'import' and 'export' may only appear at the top level (14:0)

I'm stumped. I think browserify is trying to parse the raw vue code before compilation, but again, I'm a complete newbie at browserify.

For a while I was using gulp to kick off a vue-cli build iterating over each .vue file in a directory. Not the most efficient process, but did give me built components I could include as needed in other scripts. https://github.com/vuejs/vue-cli/blob/master/docs/build.md — Bert, Mar 21 '17 at 01:11
Specifically, you can `vue build Component.vue --prod --lib` and build a single component for use. — Bert, Mar 21 '17 at 01:13
Just as a quick update, I did end up getting everything working. My solution was to call webpack from gulp rather than Browserify. I still maintain that app, and the gulp-based process works well for us, since it not only handles Vue compilation, but also copying of static resources, compiled DLLs (ASP.NET), etc. I've written newer apps with more of a traditional, SPA vibe and using webpack only, and that works great as well (and allows for hot reloading, which is hard to give up once you're spoiled by it!). — richardtallent, Jul 31 '18 at 00:59

FitzFish · Answer 1 · 2018-06-06T10:10:04.433

I actually adapted a plugin for this last year, based on vueify but without browserify. I think it does exactly what you want.

You can find it here: https://www.npmjs.com/package/gulp-vueify2

var vueify = require('gulp-vueify2');

gulp.task('vueify', function () {
  return gulp.src('components/**/*.vue')
    .pipe(vueify(options))
    .pipe(gulp.dest('./dist'));
});

For people that don't need to use gulp, there are however much more consistent solutions to compile vue components, such as bili for librairies or parceljs for apps.

Last but not least, if you are ready to enforce some conventions, Nuxt is the perfect way to compile your app with minimal config work and optional server-side rendering built-in.

How do I get a simple Vue compilation going in Gulp?

1 Answers1