如何在Gulp中获得简单的Vue编译？

Question

我已经在我的工作流程中使用了gulp,我目前没有使用webpack或browserify,但似乎编译Vue 2.x组件需要一个或另一个,没有主动维护的机制来直接编译Vue组件作为gulp任务.

我已经搜索过,似乎无法找到一个工作参考,只需将*.vue组件中的目录编译成单个JavaScript文件,然后我可以从我的页面链接.我只是想创建和使用一些组件,我不是在创建SPA.

这就是我所拥有的:

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');

app.vue文件与此处的示例相同.我无意实际拥有一个"app"组件,我只想尝试一个示例,我会用一个单文件组件列表替换它.

这是结果:

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

我很难过.我认为 browserify试图在编译之前解析原始的vue代码,但同样,我在browserify上是一个完整的新手.

Answer 1

去年我实际上为此改编了一个插件，基于vueify但没有 browserify。我认为它正是你想要的。

您可以在这里找到它：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'));
});

对于不需要使用 gulp 的人来说，有更一致的解决方案来编译 vue 组件，例如用于库的bili或用于应用程序的Parceljs。

最后但并非最不重要的一点是，如果您准备好强制执行一些约定，Nuxt是用最少的配置工作和可选的内置服务器端渲染来编译应用程序的完美方法。