Wordpress Plugin Gulp + Browsersync Setup

README.md

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 the siteurl and homeurl 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;

    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: "../../../" // <- Traverse upwards to the root of the wordpress installation
        },
        bs: {
            proxy: "localhost:9001", // <- This must point to your host and port defined above
            open: false
        }
    };