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(':')[0] + ':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, watch
, jshint
, scripts
and scss
and they all run depending on which file you change. If jshint
fails for some reason then scripts
is not being run (because it would produce poor javascript).
In every case both scripts
and 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 first file is an example of where all your javascript source files should be, in
/js/src/
- The manifest file just loads all those files from the
src
folder and, if you use Bower, from thebower_components
directory style.scss
loads 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 functions.php
:
/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.