Notes on using WP Gulp

BrowserSync while using a proxy

When using browsersync with a proxy, as I’m likely to do since we’re using MAMP Pro most of the time, it’s important to make changes to the default settings in order to support a local SSL certificate. Go into the gulpfile.babel.js file and change the proxy line 88 to what the site URL is, set up with MAMP.

If you’re still having problems with this, it may have to do with the security settings of the browser. Follow the instructions at How to Set Up HTTPS Locally Without Getting Annoying Browser Privacy Errors.

Babel & JavaScript Concatenation

Additionally, I’ve had problems with the babel plugin. By default it will concatenate all custom (and library) javascript files using Strict Mode. When joining a pre-existing project with legacy code, this can be a problem. To fix this, go to gulpfile.babel.js and modify line 212 so that instead of

presets: [
	['@babel/preset-env', // Preset to compile your modern JS to ES5.
		{	
			targets: { browsers: config.BROWSERS_LIST } // Target browser list to support.
		}
	]
]

we add a directive to disable the Strict Mode modules, as such:

presets: [
	['@babel/preset-env', // Preset to compile your modern JS to ES5.
		{	modules: false, //disables the "use strict" mode which otherwise gives us errors in the console.
			targets: { browsers: config.BROWSERS_LIST } // Target browser list to support.
		}
	

For more info on WP Gulp, go to https://github.com/ahmadawais/WPGulp/