Gulp and Browsersync

Workflow
1

I’m struggling to correctly configure my gulpfile trying to get browsersync running with my Local site. Anyone have insights, ideas or similar troubles?

2

I was able this week to use this ready made solution, and just updated the settings where noted. Took a few minutes and I was up and running.

I spent a lot of time looking up different approaches and ended up very pleased with this.

2 Likes
3

Could you post your gulpfile as an example?

4

@benluoma Were you able to get this resolved?

Running Local and working with npm run watch / browsersync loads very slow for me.

1 Like
5

I wasn’t able to get this working. I honestly haven’t put much time towards @jasperridge’s WP Gulp suggestion though. I’ll see if I can carve out time this week to work it out.

6

I realized your approach is mostly getting Gulp situated with Local by Flywheel. I’m using FoundationPress which has a working gulp file you may be able to reference.

7

Gulp definitely seems a lot slower (2-3x) than when used with WAMP.
Also I can’t get Browser-sync to work at all.

1 Like
8

I use Gulp with LiveReload instead of BrowerSync, works very well for me in Local with no speed problems. Here’s my gulpfile.js: https://gist.github.com/lumpysimon/cf9887c63a345d1f933eafad45894970

2 Likes
9

This is neither perfect nor my whole gulpfile.js but maybe it helps.

// watch
gulp.task('watch', function() {

  browserSync.init({
    proxy: 'http://local.dev/', // We need to use a proxy instead of the built-in server because WordPress has to do some server-side rendering for the theme to work
    watchOptions: {
      debounceDelay: 1000 // This introduces a small delay when watching for file change events to avoid triggering too many reloads
    }
  });

  gulp.watch('scss/*.scss', { interval: 500 }, ['css']);
  gulp.watch('*.php', { interval: 500 }, ['reload', 'css']);

});

// Default Task
gulp.task( 'default', ['watch', 'css'] );

I guess the proxy-part is important.

10

Hi ibes,

Do you mind sharing your whole gulpfile? tried to make it work but getting errors. :frowning:

11

have you found a working solution ben?

12

Sorry for the delayed responses but yes… I found success in @jasperridge’s solution of using WPGulp https://github.com/ahmadawais/WPGulp

That gulpfile did a lot more than what I was looking for though - nothing bad but the initial gulp task takes longer to run than what I’d previously been working with. It is really heavy on the variables up front. I only use a half dozen or so for what I need. At some point I will trim it down to fit my purposes and repost it here.

13

Cool, I tried that link too but couldn’t get it to work properly. Would be great if you can share the gulp file.

14

Awais’s boilerplate is becoming like a gold standard, it’s what I used too. Sure, I’ve had to do a lot of customizations. But outta the box it works quite well.

1 Like
15

Hi, here’s a link to my set up that I use to build do22.co. Hope you can make to suit your needs.

22 by Kabolobari Bitbucket Repo

16

Hey, folks!:wave:

Late to the party here — developer of WPGulp (I think it’s the most popular gulp utility for WordPress). Take a look and use it. BrowserSync works just fine with local and WPGulp.

@benluoma Here to help :slight_smile:
@jasperridgeYay! Thanks for the share! :raised_hands:
@kbooshco That’s very kind of you to say! :100:

:point_right: And BTW we’ve been working towards an extra-ordinary new build from scratch. Which will be cached for better results, ES6 Support, and a lot more. Take a look → :rocket: WPGulp 2.0 Goals + Call for Contributors! #61. Feel free to join in.

Let me know of you have any questions. :raised_hands:

1 Like
17

Hi all,

Having trouble getting Awais’s boilerplate to talk to Local – seems like browsersync always appends a port to the URL (eg. testsite.local:3000), which doesn’t work. Can anyone who’s gotten this to work share a gulpfile or description of what customizations need to be made?

currently trying:
browserSync.init({ open: 'external', host: 'testsite.local', proxy: 'testsite.local' })

for which gulp spits out:
Local: http://localhost:3000
External: http://testsite.local:3000

any thoughts?

18

Hey Ahmad (and anyone else that can possibly help)

I’m using WPGulp alongside Local and having horrible loading problems, for example I can complete a CSS change and the styles task runs but the loading of the page is taking a good 5-10secs, it sits there saying ‘Waiting for localhost’. Here’s my gulp file

https://pastebin.com/B9fCf6Jw

19

I had been having issues with Browsersync not loading the site after moving to Local v5.x.

I seem to have gotten it to work… If the WP site settings are using https:// the site will not load even when using the Local cert/trust option. Changing the url settings to use http:// works!

You can force https in browsersync if you like by using the --https option.

Here is a snip of my gulp file for reference.

//var localurl = false;
var localurl = “sandbox.localdev”;

// Global browser-sync start and watch
gulp.task(‘bs-serve-watch’, function() {
if (localurl == false) {
exec(‘browser-sync start --server -f “.html, .php, templates/**/.twig, style.css, js/.js, img/**/"’);
} else {
exec(‘browser-sync start --proxy "’ + localurl + '" -f ".html, .php, templates/.twig, style.css, js/.js, img/”’);
}
})

1 Like
20

I can confirm that WPGulp works great on Local. The main thing you should do is verify the SSL cert for the Local install and in the browsersynb URL (proxy url) include the full domain. ex https://installdomain.local

Hope that helps!