This repository was archived by the owner on Dec 26, 2018. It is now read-only.
This repository was archived by the owner on Dec 26, 2018. It is now read-only.
Gulp 4 + Watchify does not apply vueify #225
Open
Description
I am doing some simple tests on using Gulp and Watchify for Vue projects when I run into a problem where Watchify triggers a rebundle but the resulting bundle.js gives an error when run. Further investigation indicates when rebundling the <script> of the Vue component is not included in the bundle. This only happens when Watchify triggers a rebundle but not during initial bundling using the default task or running the js task directly.
gulpfile.js
var browserify = require('browserify')
var watchify = require('watchify')
var gulp = require('gulp')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var sourcemaps = require('gulp-sourcemaps')
var rename = require("gulp-rename")
const b = browserify({
entries: './index.js',
debug: true,
cache: {},
packageCache: {},
})
gulp.task('js', function(){
return b
.transform('babelify', {presets: ['env']})
.transform('vueify')
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.on('error', console.log.bind(console))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'))
});
gulp.task('watch', function(){
b.plugin(watchify)
b.on('update', gulp.series('js'))
return Promise.resolve(true)
})
gulp.task('default', gulp.series('watch', 'js'))
index.js
var Vue = require('vue')
var App = require('./App.vue')
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div id="app" class="container">
<h2 class="display-2">{{ msg }}</h2>
</div>
</template>
<script>
module.exports = {
data: () => ({
msg: 'Hello World'
})
}
</script>
<style scoped>
</style>
Metadata
Metadata
Assignees
Labels
No labels