Jump to content
Sign in to follow this  
maxxd

broswerSync, Gulp, vagrant, and proxy - not a good combo?

Recommended Posts

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.