For Mac users that do not have the need to create local sites with different PHP versions, Laravel Valet is perhaps the lightest, fastest and best localhost development environment for setting up WordPress (or any other static/dynamic) sites as of today.
A few reasons why I love Valet:
- Lightweight, super fast, feels native as if part of the OS
- Always-on sites with nothing to start/stop
- The ability to group sites into folders
- Automatic built-in SSL for every site
- wp-cli-valet-command – “This command will spin up a new WordPress installation — complete with database and https ready-to-use in your browser faster than you can put your pants on.”
- Custom automations. Ex.: install WordPress with my favorite theme, Genesis installed, default plugins removed, All-in-One WP Migration installed & activated and more, thanks to WP-CLI and shell scripting.
and now, we can add one more to the list: Automatically view the changes done to the files in the browser.
This tutorial provides the steps to set up BrowserSync to work with Valet sites using Gulp.
After you have followed this, running a single gulp
command in the terminal will launch your site’s URL in a new tab in your default browser and automatically reload whenever you do any PHP and JS changes.
CSS changes will be injected without a browser refresh.
Bonus: Open the external URL generated in other devices like tablets and mobiles on the same network as your Mac and everything will work in unison – reloading, injection and scrolling.
Step 0: Prerequisites
- Install Node.
- Install Gulp CLI globally.
npm install gulp-cli -g
Step 1: Project configuration
Create a file named package.json
in the project folder (in my case, this is the active theme directory) having:
{
"name": "wp-browsersync",
"version": "1.0.0",
"description": "Description of your project",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Your Name",
"license": "GPL-2.0"
}
Step 2: Install Gulp and BrowserSync locally
Navigate to the project folder in the terminal and run
npm install browser-sync gulp --save-dev
This should create a package-lock.json
file, node_modules
folder and add devDependencies
section in package.json
.
Step 3: Gulp Configuration File
Create a file named gulpfile.js
having the following:
// Require our dependencies.
var browserSync = require( 'browser-sync' ).create();
var gulp = require( 'gulp' );
var siteName = 'genesis-sample'; // set your siteName here
var userName = 'sridharkatakam'; // set your macOS userName here
// Set assets paths.
var paths = {
php: [ '*.php', '**/*.php' ],
scripts: [ 'js/*.js' ],
styles: [ '*.css', 'css/*.css' ]
};
/**
* Reload browser after PHP & JS file changes and inject CSS changes.
*
* https://browsersync.io/docs/gulp
*/
gulp.task( 'default', function() {
browserSync.init({
proxy: 'https://' + siteName + '.test',
host: siteName + '.test',
open: 'external',
port: 8000,
https: {
key:
'/Users/' +
userName +
'/.config/valet/Certificates/' +
siteName +
'.test.key',
cert:
'/Users/' +
userName +
'/.config/valet/Certificates/' +
siteName +
'.test.crt'
}
});
gulp.watch( paths.php ).on( 'change', browserSync.reload );
gulp.watch( paths.scripts ).on( 'change', browserSync.reload );
gulp.watch( paths.styles, function() {
gulp.src( paths.styles ).pipe( browserSync.stream() );
});
});
Replace genesis-sample
with the name of your local site.
Replace sridharkatakam
with your macOS username.
Step 4: Magic!
Run
gulp
A URL like https://genesis-sample.test:8000 should automatically have been launched in a new tab in your browser if everything went well.
To access the site in other devices on the same network, you need to replace the sitename with the IP of your computer (can be obtained from the built-in Network Utility app) in the generated External URL.
Ex.: https://192.168.86.47:8000
instead of https://genesis-sample.test:8000
.
Ignore the browser security warning and proceed.
That’s it!
If your project is under Git version control, make sure node_modules
is added to .gitignore
.