WP Hot Reload with Gulp file

gulpfile.js

/**
 *
 * How to use this file
 *
 * Step 1: Ensure Gulp CLI is installed globally
 *		     npm install gulp-cli -g
 * Step 2: Install BrowserSync and Gulp as a local development dependency for the project.
 *         npm install browser-sync gulp --save-dev
 * Step 3: Save this file to the directory and edit where appropriate
 * Step 4: Type gulp in the command line to initiate BrowserSync
 *
 **/

// Require our dependencies.
var browserSync = require( 'browser-sync' ).create();
var gulp = require( 'gulp' );

// set your siteName here
var hostName = 'wp.local';

// 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: 'http://' + hostName,
		host: hostName,
		open: 'external',
		port: 8080
	} );
	
	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() );
	} );
} );