어떻게 하면 간단한 Vue 컴파일을 Gulp으로 할 수 있을까?

어떻게 하면 간단한 Vue 컴파일을 Gulp으로 할 수 있을까?

나는 이미 워크플로우에서 꿀벌을 사용하고 있으며, 현재는 웹팩이나 브라우저파일을 사용하지 않지만, Vue 2.x 구성 요소를 컴파일하는 데는 하나 또는 다른 하나가 필요한 것 같고, Vue 구성 요소를 직접 꿀벌 작업으로 컴파일하기 위한 능동 유지 메커니즘은 없는 것 같다.

검색해 봤는데, 단순히 디렉토리를 작성하기 위한 작업 참조를 찾을 수 없는 것 같아.*.vue내 페이지에서 링크할 수 있는 단일 JavaScript 파일의 구성 요소.나는 단지 SPA를 만드는 것이 아니라, 일부 부품을 만들어서 사용하고 싶다.

내가 가지고 있는 것은 다음과 같다.

gulpfile.js.s.

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

vue components.

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

앱.vue 파일은 여기 예시와 같다.나는 실제로 "앱" 구성요소를 가질 생각은 전혀 없고, 단지 샘플을 보내려고 할 뿐이고, 이것을 내 단일 파일 구성요소 목록으로 바꿀 것이다.

그리고 그 결과는 다음과 같다.

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

쩔쩔매고 있다.나는 Browserify가 컴파일 전에 원시 vue 코드를 구문 분석하려고 한다고 생각하지만, 다시 말하지만, 나는 Browserify에 완전히 새로운 사람이다.

나는 실제로 작년에 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'));
});

꿀꺽을 사용할 필요가 없는 사람들을 위해, 그러나 libralies나 앱용 소포와 같이 vue 구성요소를 컴파일하기 위한 훨씬 더 일관된 해결책이 있다.

마지막으로, 일부 규칙을 적용할 준비가 되면 Nuxt는 최소한의 구성 작업과 선택적 서버 측 렌더링 내장으로 앱을 컴파일할 수 있는 완벽한 방법이다.

참조URL: https://stackoverflow.com/questions/42908941/how-do-i-get-a-simple-vue-compilation-going-in-gulp