Atomic Smash homepage splash

Using Gulp with WordPress – Part 1

Words by Adam WardApril 22, 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.

What is Gulp?

Gulp is a tool that helps to speed up your web development by automating tasks. Using Gulp we can write tasks in Javascript to do things like compile our SASS to CSS, minify our code and images, rename and concatenate files, plus a whole lot more!

Adding Gulp to a project

If you already have NPM and Gulp installed you can safely skip this section! To begin using Gulp we need to have Node js installed on our machine. The best way to do this is to visit here and download the ‘Recommended for most users’ version. The reason we need to install Node js is because Gulp and the modules that extend it are installed using Node Package Manager (NPM).

After installing Node js on your machine, you can head to your terminal and run the following command $ node -v which should return the Node version number. With Node installed we can now install Gulp’s Command Line Interface (CLI) $ npm install –global gulp-cli This package will allow us to run Gulp commands directly from a terminal window.

Adding Gulp in to a WordPress project

To start you’ll need a new WordPress installation, which is all setup with a database and ready to go. Next we’ll create a new theme in our themes directory $ cd your-wp-project/wp-content/themes && mkdir gulp-wp This will create a new theme called ‘gulp-wp’, next $ cd gulp-wp and run $npm init this command will create a package.json file in our theme. After running this command you will be prompted in your terminal window to answer a few questions, you don’t need to worry about this now, just keep hitting return to use the suggested names and settings, which will actually populate your package.json file. If you open this file, it should look like this –

{
  "name": "gulp-wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Tried setting up Composer with WordPress?

Get started

With NPM installed in our project we can now go ahead and use it to install Gulp. From inside our new theme run $ npm install gulp –save-dev this will add a new folder to our theme called node modules, with all of the modules required for Gulp and the ‘—save-dev’ flag will add Gulp to our package.json file as a new dependency.

Setting up project folders

Before we start creating our Gulp tasks lets set up our theme’s structure a bit more. Within our new theme run the following command to set up our theme’s assets $ mkdir assets && cd assets && mkdir images sass js

Setting up the gulpfile.js file

If we run $ gulp in our project you’ll notice it comes back with the following error ‘no gulp file found’, so lets go ahead and create this file. First, come back out of the assets folder we just created and back in to our theme, lets run $ touch gulpfile.js In this file we first need to require Gulp and then start writing our tasks. Add the following to your gulpfile.js

var gulp = require('gulp');
gulp.task('test', function() {
	console.log('first task');
});
// This adds the task to the default gulp task, which means it will run with just the ‘gulp’ command
gulp.task('default', ['test']);

Now when we run $ gulp again we should see our new task start, run the console log and then finish.

Creating our Gulp Tasks

We we’ll run through creating 3 Gulp Tasks…

  • Task 1: Log errors and compile our SASS in to CSS and minify the output.
  • Task 2: Log errors and minify our JS.
  • Task 3: Minify our images.

Task 1 – Compile SASS

For Gulp to be able to process our SASS we’ll need to add a new package – gulp-sass – docs – using the example from the gulp-sass docs, we will first install the package with npm – $ npm install gulp-sass –save-dev, next we will require the package like we did with Gulp. var sass = require(‘gulp-sass’);

Next we will create our task, lets remove the ‘test’ task and work with the example shown in the gulp-sass docs –

gulp.task('sass', function () {
  return gulp.src('./assets/sass/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./assets/css'));
});

// Then we will add it to our ‘default’ task - 

gulp.task('default', ['sass']);

Now to test our task. In our assets/sass directory create a file called main.scss and then a folder called ‘base’, with a SASS partial inside it called ‘_base.scss’. In our base file lets put some basic SASS –

h1 {
    color: red;
    span {
        color: blue;
    }
}

Lets import base into our main SASS file. In our main.scss file add this line –

@import ‘base/base’;

Now when we run Gulp, a new CSS folder will be created with a ‘main.css’ file, which contains our compressed SASS code. Good work, lets move on to the next task!

Task 2 – Minify Javascript

Lets create a file called scripts.js in our js directory. In here we’ll put some basic js –

console.log('second gulp task');
alert('Gulp is pretty awesome!');

We want to minify our js code, to do this lets add gulp-uglify – docs

$ npm install gulp-uglify –save-dev

Next we’ll require it in our gulp file

var js = require('gulp-uglify');

// Next we will create our js task by adapting the example in the gulp-uglify docs 

gulp.task('js', function () {
  return gulp.src('./assets/js/*.js')
    .pipe(js())
    .pipe(gulp.dest('./assets/js/min'));
});

// Then we’ll add it to our default task - 

gulp.task('default', ['sass', 'js']);

Now when we run $ gulp we should see a new directory called ‘min’ pop up in our js directory with a minified version of our scripts file inside.

Task 3 – Minify images

Now to minify our images. Put a large image in our assets/images directory. I’ll be using this one, if you want to follow an exact example – demo image – this image is 8.5MB so it should be a good one for minifying.

To optimise our images we’ll use the very popular gulp-imagemin – docs. Lets follow the steps from the docs, you should be getting used to them by now 😉

$ npm install gulp-imagemin –save-dev

Require the package in our gulpfile.js

var imagemin = require(‘gulp-imagemin’);

// Then write our image minify task 

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

// Add it to our default gulp task - 

gulp.task('default', ['sass', 'js', 'imagemin']); 

When we run $ gulp we should see our image goes from 8.5MB to 7.9MB, excellent! Obviously this is just an example and it’s very unusual that you would have an image this size, also if you use another image please remember that the image might have already been optimised so try to test with one you know hasn’t been for the best effect!

Wrapping up part 1

Gulp can seem confusing at first but after writing a few tasks hopefully it’s all starting to make a lot more sense. Our final gulp file should look like this

// Require gulp packages
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');

// 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'));
});

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

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

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

There’s so much more you can do with Gulp – in Part 2 we will start to build up our WordPress theme and add BrowserSync to our Gulp setup, to enable live browser reloading!

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