In the first part of this series I’ll run through what Gulp is and how to setup it up and use it in your WordPress development.

2

Using Gulp with WordPress – Part 2

In this final part of using Gulp with WordPress, I will walk through the process of adding browser reloading as our final task.

When it comes to live browser reloading with Gulp, don’t look any further than Browsersync, it’s built on NodeJS and integrates very well with wide array of build tools – especially Gulp!

What does it do?

As a development tool, Browsersync can be triggered to update/refresh your browser across multiple devices at once. A primary use would be each time you save your CSS, the styles are injected instantly, without the need of a full browser refresh. The result means development is much quicker and seeing your styles instantly update is quite an enjoyable experience!

Browsersync provides an internal and external url, which means you can also see your changes reload live across multiple devices, which makes it very useful when testing responsive changes and across different types of browsers.

Setting up Browsersync

Firstly, we’ll need to add Browsersync to our project, to do this we’ll use NPM, just as we did in Part 1. We need to run this command within our theme folder, it will add all necessary node modules required for Browsersync and add it to our package.json file.

npm install browser-sync —save-dev

Next we need to require in our gulp file. We’ll also create a variable called ‘reload’, which we will use for Browsersync’s reload method, which is useful if you want to see your html/php changes reload after you save the files.

Creating our Tasks

Our first task uses the Browsersync ‘init’ method, which starts the service, which can be from a proxy url or as a static file location using the server option. We’ll use the proxy method and set it to ‘gulp-wp.dev’, which is the URL our auto browser refreshing will appear.

Our second task for Browsersync will be our ‘reload’ function. This will call the browsersync.reload(); function each time we use it within our other tasks.

gulp.task('reload', function () {
browsersync.reload();
});

Injecting Styles & Scripts

To live-inject CSS & JS changes, without the need to reload the browser, we can use BrowserSync’s ‘stream’ function. This function fires when your CSS/JS has finished compiling and injects the changes to your browser. Let’s add it to our CSS and JS tasks…

Watch Tasks

The ‘watch’ task is where everything comes together in our automated process. Within this task we tell gulp that if certain files are updated then run a task. For example – our sass watch task, we set our destination, which is ‘./assets/sass/*.scss’, if a file is updated in this directory then run the ‘sass’ task.