Gulp and Browsersync


#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?


Gulp + Browsersync or Livereload
#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.


#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.


#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.


#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


#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.


#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:


#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