Theme Development with Gulp and Bower

Learn how to use Gulp and Bower in Sage for WordPress theme development

This screencast is for Sage 8

Learn how to get up and running with the tools needed to work with Sage 8. Learn how the gulpfile works and how to work with third-party packages.

Topics covered

  • Installing Node.js, gulp, and Bower
  • Looking into the Sage gulpfile
  • BrowserSync in action
  • Adding third-party packages (such as jQuery plugins) with Bower
  • How to override Bower packages when necessary, and why
  • Removing Bootstrap components, how wiredep works
  • Dequeuing WordPress plugin assets (additional CSS and JS files) and adding them to the asset pipeline
  • Adding and enqueueing your own additional CSS and JS files

I feel like a salesman for this as of late, but seriously best $10 I spent all year. The first time you run gulp watch and see CSS/JS minification + concatenation, autoprefixer, image optimization and BrowserSync all working together, it will be worth it.

Kevin W. Hoffman

Just figured I'd chime in on the Sage/gulp screencast. I paid the $10 and it was well worth it. Ben does a good job walking you through installing what you need and getting it working. Is it super in depth and cover every aspect of how gulp works with Sage, no, but I'm glad it isn't because I'd be lost and I don't think that was the purpose of the screencast. It's about 20 minutes long and by the end I had a grasp of what was going on, where to add my js scripts, working with the Less files etc... I value my time, and $10 to be up and running and have a clue as to what was happening and why, is a steal.

Jeff Wilmoth


Join over 7,800+ subscribers on our newsletter to get the latest Roots updates, along with occasional tips on building better WordPress sites.

Looking for WordPress plugin recommendations, the newest modern WordPress projects, and general web development tips and articles?

“Easily the best WordPress email I get.” Colin OBrien

Follow us on Twitter @rootswp

Ready to checkout?