gulp - 我如何在 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文件同例子here .我无意实际拥有一个“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但没有浏览器。我认为它完全符合您的要求。

您可以在这里找到它: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是使用最少的配置工作和可选的内置服务器端渲染来编译您的应用程序的完美方式。