Jump to content

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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