Jump to content

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


maxxd

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.