How to set up Browsersync with WordPress using Wamp and Gulp

I’m a huge fan of BrowserSync. In particular the ActionSync and the Browser reload feature. I’m going to demonstrate how to get BrowserSync working with Wamp, Gulp and WordPress stack.

browsersync

I’m going to assume a few things that you currently have both Node, Gulp, BrowserSync and Wamp installed and activated along with an instance of wordpress.

  • Create gulpfile.js and package.json

    From the root of your theme folder create both a gulpfile.js and package.json file. Inside the package.json add the following:

    {
    
    }
  • Pulling in the Gulp plugins

    In this guide I also be setting up Sass. So we are going to need to pull in some additional plugins. From the command line in your in your theme enter in the following command.

    npm install gulp gulp-sass browser-sync --save-dev

    You should now have a node_modules folder with all the plugins installed

  • Open up the gulpfile.js now we will going to pull in and assign the gulp plugins to variables.

    var gulp        = require('gulp'),
        sass        = require('gulp-sass'),    
        browserSync = require('browser-sync').create();
  • Creating a sass task

    gulp.task('sass', function() {
        return gulp.src('./sass/**/*.scss')
                .pipe(sass({
                    'outputStyle' : 'compressed'
                }))
                .pipe(gulp.dest('./'))
                .pipe(browserSync.stream());
    });
  • Creating a task called serve

    The serve task is where BrowserSync does the watching of the files. Also where it says YOURDOMAIN change it to your website domain.

    gulp.task('serve', ['sass'], function(){
        browserSync.init({
            proxy   : "http://localhost/YOURDOMAIN"
        });
        
        gulp.watch('./sass/**/*.scss', ['sass']);
        gulp.watch('./**/*.php').on('change', browserSync.reload);
    });
  • Create a default task and assign it to the serve task

    gulp.task('default', ['serve']);
  • Back to the command line

    From the command line type in gulp. Open up your browser and go to the site. Now go back to your editor and make some changes to either your sass files or you php files. The browser will then reload with the changes made.

2 responses to “How to set up Browsersync with WordPress using Wamp and Gulp”

  1. Leif says:

    First code is wrong, it’s inside the package.json, not Gulp file

    Also, don’t forget to install Browsersync ! :p

    You could explain the code a little more to understand what’s happening, but it works, thank you !

  2. Duane Blake says:

    Thanks for the heads up. I’ve updated the guide.

Leave a Reply

Your email address will not be published. Required fields are marked *