
Using gulp to make your WordPress site runs faster
First of all, what is gulp? It’s open software, a task runner build on node.js. Maybe it isn’t very descriptive, so let’s jump into an example. When I build a theme or a plugin for WordPress, I use many CSS, less, scss, javascript files. For WordPress theme it may be:
- /src/less/basic.less
- /src/less/main.less
- /src/css/default-wp.css
- /src/css/theme-a.css
- /src/css/theme-b.css
- /src/css/responsive.css
Now, I need those files in my theme, so I use `wp_enqueue_scripts` hook and then… No, I do not use `wp_enqueue_style` for each file (including `.less` compilation somewhere). So, what do I do? I use one single file, let’s call it `my-theme.min.css`. Just one file, one HTTP call (it may be a bit outdated with HTTP/2, but it’s not everywhere).
Additionally, I got `/src/js/default-wp.js` and `/src/js/theme.js` files. It’s javascript, yes, so we need to use `wp_enqueue_script`
So, what do I need to do to get my `my-theme.min.css` file? I need gulp. Of course I also need node, npm etc. Some of you knows, some of you doesn’t know, but I use Windows 7/10 in my development work. So, first what I need is to download `node.js` (I use 64 bit installer for Windows). Then, of course, double-click and I got this beauty thing installed, right? Of course. Then I go into command-line and…
C:\> npm install npm@latest -g
Then I install gulp:
[postad1]
C:\> npm install gulp-cli -g
npm install gulp -D
Now, when I got it, I got into my `themes` directory and I write `gulpfile.js` – this is default filename to run with gulp. Then, we need to put there some configuration:
var gulp = require( 'gulp' ), less = require( 'gulp-less' ), uglify = require( 'gulp-uglify' ), mcss = require( 'gulp-minify-css' ), concat = require( 'gulp-concat' ); gulp.task( 'less', function () { gulp.src( 'my-theme/src/less/*.less' ) .pipe( less() ) .pipe( gulp.dest('my-theme/src/css') ) } ); gulp.task( 'css', function () { gulp.src( 'my-theme/src/css/*.css' ) .pipe( mcss() ) .pipe( concat('my-theme.min.css') ) .pipe( gulp.dest('my-theme/assets/css') ) } ); gulp.task( 'js', function () { gulp.src( 'my-theme/src/js/*.js' ) .pipe( uglify() ) .pipe( concat('my-theme.min.js') ) .pipe( gulp.dest('my-theme/assets/js') ) } ); gulp.task( 'default', [ 'less', 'css', 'js' ] );
By the way, you will need to install all this small plugins, like gulp-less, gulp-uglify etc. It isn’t very hard, it’s easy:
C:\wp-sample\themes\> npm install gulp-uglify
C:\wp-sample\themes\> npm install gulp-concat
etc., etc. Let’s get back to the `gulpfile.js`. What is going on?
[postad2]
We’ve got four tasks. Those are `less`, `css`, `js` and `default`. If you need to call just one task, you may use something like that:
C:\wp-sample\themes\> gulp less
and that’s it! Of course we do not want to call three (`less`, `css` and `js`) tasks separately in most cases, that is why we have `default` task here, with dependencies on other tasks. And because `default` task is, well, default, we do not need to even name it! We call it like that:
C:\wp-sample\themes\> gulp
and then magic happens.
PS: it is important to run `less` task before `css` task, because we need less files to be compiled into css before merging css files. We may use dependency (see `default` task example). It is your homework.
[postad3]
Of course this is the simplest example I could imagine. Dig into gulp because it is worth it.

