How to set up Browsersync with WordPress using Wamp and Gulp

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.