maxxd Posted February 6, 2019 Share Posted February 6, 2019 OK - I've been beating my head against this for a bit now and I give up... I've got a vagrant box up and running on my host system. I'm using gulp with several node modules from the host system, and everything is working well except browser-sync. My directory structure (abbreviated): /dev /_assets /javascript /less /build /templates gulpfile.js package.json Here's the code so far: const _ = require('lodash'); const aw = require('gulp-load-plugins')({ pattern: ['*'], scope: ['existingDevDependencies'] }); aw.browserSync = require('browser-sync').create(); const pkg = require('./package.json'); var themeName = pkg.name.toLowerCase().replace(new RegExp(' ','g'), '-'); aw.gulp.task('Develop', ['browserSync', 'developJS', 'compileCSS', 'watch']); var theme = { srcJS : '_assets/javascript/**/*.js', srcCSS : '_assets/less/**/*.less', srcStyle : ['!_assets/less/variables.less', '_assets/less/style.less', '_assets/less/**/*.less'], destJS : pkg.directories.content + '/js', destCSS : pkg.directories.content + '/css', }; /** * Set up the browser reload on the host machine when the files are updated */ aw.gulp.task('browserSync', () => { aw.browserSync.init({ proxy: "vagrant.craft.internal", host: "vagrant.craft.internal", open: "external", port: 80, }); }); /** * Development JavaScript handling. * Browserify, Babelify, and uglify with in-line sourcemapping */ aw.gulp.task('developJS', () => { "use strict"; _.forEach(_.castArray(pkg.scripts.entry), (script) => { aw.browserify({ entries: ['./_assets/javascript/' + script + '.js'], debug: false }) .transform(aw.babelify, { compact: true, retainLines: false, comments: false, }) .bundle() .on('error', handleError) .pipe(aw.vinylSourceStream(script + '.min.js')) .pipe(aw.vinylBuffer()) .pipe(aw.uglify({ sourceMap: { url: 'inline' } })) .pipe(aw.gulp.dest(theme.destJS)); }); }); /** * During development, obviously we want the system to watch for any * important changed files and to handle those automatically. */ aw.gulp.task('watch', ['browserSync', 'developJS', 'compileCSS'], () => { "use strict"; aw.gulp.watch(theme.srcCSS, ['compileCSS', aw.browserSync.reload]); aw.gulp.watch(theme.srcJS, ['developJS', aw.browserSync.reload]); aw.gulp.watch('./build/templates/**/*.html', aw.browserSync.reload); }); /** * Production and Development .less processing * Processes the .less to CSS, then minifies the file. * Note that grid support is enabled and we're bablifying * back to IE10. This should change in the very near * future as we drop support for 10. */ aw.gulp.task('compileCSS', () => { "use strict"; return aw.gulp .src(theme.srcStyle) .pipe(aw.plumber(handleError)) .pipe(aw.less({ strictMath : 'on', strictUnits : 'on', })) .pipe(aw.concat('all.css')) .pipe(aw.autoprefixer({ browsers: [ "last 2 versions", "IE 10" ], grid: true })) .pipe(aw.cssmin()) .pipe(aw.rename({ extname : '.css', basename : 'style' })) .pipe(aw.gulp.dest(theme.destCSS)) .pipe(aw.browserSync.stream()); }); browserSync initializes just fine - my browser opens, loads http://vagrant.craft.internal and my terminal shows the proper Local, External, UI, and UI External addresses. I update my .less, .js, and .html files and my terminal says 'Reloading Browsers'. But there's no browser reload... Quote Link to comment https://forums.phpfreaks.com/topic/308286-broswersync-gulp-vagrant-and-proxy-not-a-good-combo/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.