Gulp and Browser sync

Since quite some time I’m playing around with Gulp as a Task Manager but I had a hard time getting it running in my environment, mostly because I screwed up the node.js installation on my Macbook.

I completely removed it and started over, after that I used this walkthrough to get browsersync and sass running with gulp. We don’t use the _s theme from WordPress since we have our own starter theme but it works with any sass -> css setup.

The most important puzzle piece is the gulpfile provided in the walkthrough, you only have to tweak it to your local path settings and done.

So whenever I install this in a theme folder I’m working on the following happens:

If I save a php file, the browser window reloads and shows the change. If I save a sass file it compiles it to css and injects it in the page, no reload needed.

Super sweet set up. To top it all of, it creates an URL accessible from external devices, phone or tablet and all changes are injected there the same way.

That will speed up Web Dev quite a bit and eliminates the need to reload every time you save something.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s