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:

1. /src/less/basic.less
2. /src/less/main.less
3. /src/css/default-wp.css
4. /src/css/theme-a.css
5. /src/css/theme-b.css
6. /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.