Using Gulp in WordPress

Gulp for WordPress themes and Plugins can boost your development speed. One word AUTOMATION in basic terminology that defines gulp. Web developers often find themselves doing repetition in small and tedious work on daily basis which can be simplified by implementing gulp and automation.

With gulp assumption -> automated repetitive tasks = focus on more important tasks = More productivity

Quick Edit March 18th, 2017

Gulp does not need to be installed globally. Only Gulp CLI needs to be installed globally. This is because, installing gulp globally effectively has no use, instead the local version of gulp is used in projects.

So, What is Gulp Exactly?

Gulp is a javascript task runner that lets you automate tasks defined using code over configuration. There is another famous task runner that exists known as Grunt. Comparing the two gulp is more easier to implement.

Though you will need to know basics on javascript and basic knowledge on configuration logics.

Note: At the time of this post BrowserSync does not work as expected and kinda slow. So not recommending.

Getting Started with Gulp

Please note that you do not need to know node to implement gulp. You will only need node installed which you can look up in nodejs site. Installation might vary according to operating system but it is not difficult to install.

As gulp uses node in order to execute tasks so the only explanation we will be looking into is how gulp works and how we can implement in our WordPress project.

Installing Node and NPM package manager

Currently i am using a windows machine however, process is same for all operating system. So, before we start you will need to install Node js on your machine (https://nodejs.org/en/download/) or install it using a command line.

Once, installed open up terminal or command and type:

1

node-v

1

npm-v

These above should be typed separately. If node is installed then their version numbers will be shown like in above screenshot. If either fails then check your command or verify that you installed your node js correctly.

Installing Gulp

In order to use gulp in your projects, you will need to install it globally like following.

1

sudo npm install gulp-g

For linux, mac with sudo commands do above and for windows users – Open up command prompt and type the same but without sudo.

The -g parameter in command defines that the corresponding package to be installed globally into system. Now, to verify that gulp is installed you check by following command.

1

gulp-v

Diving into WordPress

We will implement gulp in our plugins for this project, You can do it for themes as well. Same process but only different directory 🙂

or you can create a new folder in your plugins directly and name it anything you want. Download files from github and keep it into your plugin folder.

You will find a package.json and gulpfile.js file in the plugin directory. These files are crucial in order to implement gulp in a project. Package.json file will hold dependencies to your project whereas, gulfile.js is configuration file for using gulp.

Now that you have created or copied either way we are ready to implement gulp in our project.

Understanding package.json file

Create a gulpfile.js and keep it empty for now. Run npm init on your command/ terminal.

Package.json file is created and used by npm to manage dependencies/package for your project. In order to create this file you can run npm init on your command/ terminal. Running npm init will ask you some details to be filled up. After installing gulp create a package.json file via npm init. After you have filled in details run npm install gulp –save-dev.

This will install gulp into your project and automatically save it in your package.json file.

After you have installed open your package.json file and copy above devDependencies to your package.json file or simply copy whole above code to your package.json file.

I will not be going through each and every dependencies on what they do. I suggest you google them for their purpose.

Now after creating both gulfile.js and package.json you will need to fetch those dependencies on your project which you can do by running following code.

1

sudo npm install ornpm install

This will create a folder node_modules which can be seen when installing gulp into your project as well. After the fetching is completed our dependencies are ready and waiting to be used by gulpfile in our project.

Implementing Gulp

Now the final part where all magic begins. Gulp file needs to be in root of the project that we are implementing gulp on. In our case i.e wp-content > plugins > our-project.

Gulp is easy since its code over configuration.

Simple Gulp API

Gulp contains only 4 api’s which are easier to understand and implement. So, you won’t need to figure out how complex an API works. Cool eh ?

API

Purpose

gulp.task

Define a task

gulp.src

Read files in

gulp.dest

Write files out

gulp.watch

Watch files for changes

Let us take a look at gulfile.js.

A. Configuration

The below code are just basic variables to be used in later process. They define the path of files to be compressed, minified and watch when modified or changed. Read comments to know exactly what they do.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/**

* Configuration.

*

* Project Configuration for gulp tasks.

*

* Edit the variables as per your project requirements.

*/

varproject='wp-plugin-gulp';// Name

varstyleSRC='./files/assets/css/**/style.scss';// Path to main .scss file

varstyleDestination='./files/css/';// Path to place the compiled CSS file

B. Loading Dependencies

Below code loads necessary dependecies for implementing/ automating some tasks. Such as script concatination, code prefixing, minifying css and js, comiling SASS to CSS and many more. You will need to require dependencies here in order to use them in your automation task.

varsourcemaps=require('gulp-sourcemaps');// Maps code in a compressed file (E.g. style.css) back to it’s original position in a source file (E.g. structure.scss, which was later combined with other css files to generate style.css)

varnotify=require('gulp-notify');// Sends message notification to you

C. Automating Styles

Next code is to automate stylesheet tasks such as comiling SCSS to CSS and minifying them into a single file in a specified directory which is defined in configuration part.

In a world without walls and fences, who needs windows and gates ? No gates, no windows bt apache inside! #dev Love for #Unix #Linux #Apple. Interests in coding, music, creative design, Linux and Apple products.

You may also like...

2 Responses

Great Article, but will recommend a quick edit, Gulp does not need to be installed globally. Only Gulp CLI needs to be installed globally. This is because, installing gulp globally effectively has no use, instead the local version of gulp is used in projects.