Atomic Smash homepage splash

Using Gulp with WordPress – Part 2

Words by Adam WardJune 6, 2017

Using Gulp with WordPress

Gulp is a very powerful build tool, which can help developers automate and speed up lots of tasks. In this series we’ll run over installing Gulp and how to use it with WordPress.

1

Using Gulp with WordPress – Part 1

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.

// Require Browsersync
var browsersync = require('browser-sync');
// Setup reload variable
var reload = browsersync.reload;

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.

gulp.task('browser-sync', function() {
  browsersync.init({
  proxy: 'gulp-wp.dev'
  });
});

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…

// Task 1 - Compile and minify Sass
gulp.task('sass', function () {
  return gulp.src('./assets/sass/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./assets/css'))
    .pipe(browsersync.stream());
});

// Task 2 - Minify JS
gulp.task('js', function () {
  return gulp.src('./assets/js/*.js')
    .pipe(js())
    .pipe(gulp.dest('./assets/js/min'))
    .pipe(browsersync.stream());
});

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.

gulp.task('watch', function() {
  gulp.watch('./assets/sass/*.scss', ['sass']);
  gulp.watch('./assets/js/*.js', ['js']);
  gulp.watch('./assets/images/*' , ['imagemin']);
  gulp.watch(['*.html', '*.php'], ['reload']);
});

Next we will add our new ‘browser-sync’ and ‘watch’ tasks to our default task, that we set up in part 1.

gulp.task('default', ['sass', 'js', 'imagemin', 'browser-sync', 'watch' ]);

Now when we run ‘gulp’ on start up our watch tasks will run as part of our default task. Lets take a look at our file gulpfile –

// Require gulp packages
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browsersync = require('browser-sync');
var reload = browsersync.reload;

// Task 1 - Compile and minify Sass
gulp.task('sass', function () {
  return gulp.src('./assets/sass/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./assets/css'))
    .pipe(browsersync.stream());
});

// Task 2 - Minify JS
gulp.task('js', function () {
  return gulp.src('./assets/js/*.js')
    .pipe(js())
    .pipe(gulp.dest('./assets/js/min'))
    .pipe(browsersync.stream());
});

// Task 3 - Optimise images
gulp.task('imagemin', function () {
    gulp.src('./assets/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./assets/images'))
});

// Task 4 - Set up Browsersync
gulp.task('browser-sync', function() {
  browsersync.init({
  proxy: 'gulp-wp.dev'
  });
});

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

// Task 5 - Set up Watchers
gulp.task('watch', function() {
  gulp.watch('./assets/sass/*.scss', ['sass']);
  gulp.watch('./assets/js/*.js', ['js']);
  gulp.watch('./assets/images/*' , ['imagemin']);
  gulp.watch(['*.html', '*.php'], ['reload']);
});

// Default Gulp tasks
gulp.task('default', ['sass', 'js', 'imagemin', 'browser-sync', 'watch' ]);

Project Files

A final version of the project can be found here. Add it to a new WordPress installation and get going with Gulp!

Profile picture of Adam Ward

Adam WardDeveloper

Adam is an expert in WordPress development and CRM integrations. His ability to craft WordPress to a users needs makes our websites easier to use.

Go back to top

Keep up to date with Atomic news