WordPress, Gulp and Browser Sync (Modernize your Workflow)

When working with WordPress there are a lot of tasks you have to do over and over. Things like css, js and image minification. You also could concatenate all the files into one minified file. Wouldn’t it be great if you could create a watcher to compile your SASS code on every save? All that can be done using Gulp (if you heard of Grunt, Gulp does the same thing but in a more logical code-minded way and Gulp is also the new kid on the block).

This great tutorial will get you up to speed with Gulp. (Note: it uses Node and NPM)

Wouldn’t it be great if you could make changes and watch the browser update with the changes every time you save? You can do this with LiveReload and the above article uses it but I always have problems with livereload. So I switched to another new kid on the block – browserSync.

Also Bower is super cool. All those dependencies you want you can easily grab and pull to your site with bower. If you create a nifty bower.json file and a package.json file, once you have all the files you mostly use to start a WordPress theme, you can just type:

$ npm init

And it will load all your dependencies in one fell swoop. Pretty cool.