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:
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:
|
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 26 27 |
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?
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.
Of course this is the simplest example I could imagine. Dig into gulp because it is worth it.
Leave a Reply