Vue.js - gulpで.vueファイルをコンパイル

Question

私はVueコンポーネントを持っています。このコンポーネントは、非常に基本的であり、このようになります：私はこのようなものを使用してHTMLファイルにインポートしたい

私-component.vue

<template> 
    <div class="foo"> 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return {}; 
    }, 

    props: { 
     message: { 
     type: String, 
     default: '' 
     } 
    }, 

    methods: { 
     display: function() { 
     alert(this.message); 
     } 
    }, 
    }; 
</script> 

：

<script type="text/javascript" src="/components/my-component.min.js"></script> 

その後私はこのようなHTMLファイルにこのコンポーネントを使用したいと考えています：

<my-component message="hello"></my-component> 

これは可能ですか？もしそうなら、どうですか？私が見るものはすべて、Web Packと他のものを使います。私は動作するコンポーネントを持っています。私はそれを簡単に配布可能にする方法を理解できません。

私はこれを助けるためにgulpfileを作成しました。これは、次のようになります。

gulpfile.js

var gulp = require('gulp'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var webpack = require('webpack-stream'); 

gulp.task('default', ['build']); 

gulp.task('build', [], function() { 
    return gulp.src('./src/my-component') 
     .pipe(webpack(require('./webpack.config.js'))) 
     .pipe(concat('my-component.min.js'))   
     .pipe(gulp.dest('./deploy')) 
    ; 
}); 

私はビルド一気タスクを実行すると、私が言うメッセージが表示されます。 webpack-stream - No files given; aborting compilation

を紛らわしい部分があるが、私はいくつかを持っています正常に機能する単体テスト。私はこのコマンドでこれらのテストを実行しています： nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

私は間違っていますか？コンポーネントを他のアプリケーションにインポートするにはどうすればパッケージ化できますか？

Answer 1

大規模なプロジェクトで作業している場合は、Webpackバンドル全体（この決定を再考してください）もブラウザも使用しないでください（vueify参照）...このパッケージを使用してコンパイルできます一息を持つ単一のjsファイルに単一のファイルコンポーネント、：

https://www.npmjs.com/package/gulp-vueify2

は、私は、このモジュールの作者だと言及する必要があります。