Gulp workflow for WordPress theme development
In order for Livereload to work, you need a Firefox or Chrome extension as Gulp doesn't inset it automatically. Alternatively, you can also manually put the livereload script in
footer.php, just make sure to insert it only on development environment:
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':') + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
There's more documentation on Livereload here.
You also need
node.js installed (it comes with npm, which is it's package manager). If you want to install frontend packages via
Bower, install that too, but it's not a requirement.
This workflow is built for MacOS, but should work in any operating system where you can get node.js to run.
There are 4 main tasks defined in this workflow,
scss and they all run depending on which file you change. If
jshint fails for some reason then
In every case both
scss produce two versions of final files, a normal, concatenated one and a minified/uglified one.
You'll need to following file strucutre (an example), but it's not mandatory, change the
gulpfile.js if your paths differ
/js/src/navigation.js /js/manifest.js /scss/style.scss
- The manifest file just loads all those files from the
srcfolder and, if you use Bower, from the
style.scssloads all the other stylesheets in
Once you start developing (and Gulp does it's job), you'll end up with the following files you can enqueue in your
/js/dist/scripts.js /js/dist/scripts.min.js # Uglified, production ready /style.css /style.min.css # Minified, production ready
Once you install this workflow, just run
$ gulp inside your theme folder and it'll automatically start to listen to any changes inside the folder and reload the browser automatically.