Running a Gulp/Browsersync setup for a wordpress plugin is a bit fiddlier than it would be in a half decent different
environment, But it can still be done with a bit of additional config.
- Firstly install Gulp, Gulp PHP Connect plugin and browserSync;
npm install gulp gulp-connect-php browser-sync
- Create a
gulpfile.js
at the root of your project, Assuming you are at the root of the wordpress installation;
touch wp-content/plugins/my-plugin-dir/gulpfile.js
- Import the NPM packages at the top of the gulpfile
var gulp = require('gulp')
connect = require('gulp-connect-php')
browserSync = require('browser-sync');
- Add any tasks you'd normally use (eg. Sass compilation, Babel/Typescript etc) and
add a
serve
task at the bottom of the file.
gulp.task('serve', function() {
var config = {
php: {
host: "localhost", // <- If you're having DNS problems try changing this to "127.0.0.1"
port: 9001, // <- Change this to a port that's free and ideally not firewalled off
base: "." // <- This base path points to the root of the wordpress installation
},
bs: {
proxy: "localhost:9001", // <- This must point to your host and port defined above
open: false
}
};
connect.server(config.php);
return browserSync.init(config.bs, function() {
gulp.watch('src/sass/**/*.scss', ['sass']);
gulp.watch('src/angular/**/*.js', ['js']);
gulp.watch('src/php/**/*.php', function() { return browserSync.reload() });
});
})
- Get wordpress installed (if it isn't already) via PHP's built in server and install as normal.
- Once wordpress is installed open the database that wordpress is using
- Open the
wp_options
table and locate thesiteurl
andhomeurl
options, They're usually IDs 1 and 2 - Change them both to match the browserSync proxy address (
config.bs
) you defined in your gulpfile's serve task
If you're developing a plugin or a theme you can use this method from the plugin/theme directory as well, Follow the above steps from inside your plugin/theme directory and adjust the
config
object like so;