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)
})
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 thedefault
task or running thejs
task directly.gulpfile.js
index.js
App.vue