javascript - Vue.js - Compile .vue file with gulp - Stack Overflow

admin管理员组

文章数量:1331949

I have a Vue ponent. This ponent is very basic and looks like this:

my-ponent.vue

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

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

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

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

I want to import it into an HTML file using something like this:

<script type="text/javascript" src="/ponents/my-ponent.min.js"></script>

Then, I would like to be able to just use the ponent in my HTML file like this:

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

Is this possible? If so, how? Everything that I see uses web pack and a bunch of other stuff. I have a working ponent. I just can't figure out how to make it easily deployable.

I created a gulpfile to help with this. This looks like this:

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-ponent')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(concat('my-ponent.min.js'))           
        .pipe(gulp.dest('./deploy'))
    ;
});

When I run the build gulp task, I receive a message that says: webpack-stream - No files given; aborting pilation

The confusing part is, I have some unit tests that successfully work. I'm running those tests via this mand: nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

What am I doing wrong? How do I package up my ponent so that I can import it into other apps?

I have a Vue ponent. This ponent is very basic and looks like this:

my-ponent.vue

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

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

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

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

I want to import it into an HTML file using something like this:

<script type="text/javascript" src="/ponents/my-ponent.min.js"></script>

Then, I would like to be able to just use the ponent in my HTML file like this:

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

Is this possible? If so, how? Everything that I see uses web pack and a bunch of other stuff. I have a working ponent. I just can't figure out how to make it easily deployable.

I created a gulpfile to help with this. This looks like this:

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-ponent')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(concat('my-ponent.min.js'))           
        .pipe(gulp.dest('./deploy'))
    ;
});

When I run the build gulp task, I receive a message that says: webpack-stream - No files given; aborting pilation

The confusing part is, I have some unit tests that successfully work. I'm running those tests via this mand: nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

What am I doing wrong? How do I package up my ponent so that I can import it into other apps?

• javascript
• vue.js

Share Improve this question Follow edited Jun 12, 2017 at 19:49 craig_h 32.7k77 gold badges6161 silver badges7070 bronze badges asked Jun 12, 2017 at 18:39 user687554user687554 11.2k2626 gold badges8282 silver badges142142 bronze badges 1

• Could you please also share your Webpack config with us? – kano Commented Jun 12, 2017 at 21:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you don't want to use any bundle - a full webpack bundle (please reconsider this decision if you are working on a big project) nor browserify (see vueify)... then you may use this package to pile single file ponent into single js file, with gulp:

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

I must mention that I am the author of this module.

本文标签： javascriptVuejsCompile vue file with gulpStack Overflow