# Gulp and Browsersync

**URL:** <https://community.localwp.com/t/gulp-and-browsersync/778>\
**Category:** Workflow\
**Created:** [February 16, 2017, 4:29pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778 "2017-02-16T16:29:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![benluoma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/benluoma/32/4525_2.png) [@benluoma](https://community.localwp.com/u/benluoma)\
**Post date:** [February 16, 2017, 4:29pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/1 "2017-02-16T16:29:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jasperridge](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/jasperridge/32/4523_2.png) [@jasperridge](https://community.localwp.com/u/jasperridge)\
**Post date:** [February 16, 2017, 9:17pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/2 "2017-02-16T21:17:46Z")

</div>

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.

> **[ahmadawais/WPGulp](https://github.com/ahmadawais/WPGulp)**
>
> An advanced & extensively documented Gulp WordPress workflow. Kick start a build-workflow for your WordPress plugins and themes with Gulp. - ahmadawais/WPGulp

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

---

<div class="post-metadata">

**Author:** ![benluoma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/benluoma/32/4525_2.png) [@benluoma](https://community.localwp.com/u/benluoma)\
**Post date:** [February 20, 2017, 9:53pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/3 "2017-02-20T21:53:59Z")

</div>

Could you post your gulpfile as an example?

---

<div class="post-metadata">

**Author:** ![victorbureau](https://avatars.discourse-cdn.com/v4/letter/v/aca169/32.png) [@victorbureau](https://community.localwp.com/u/victorbureau)\
**Post date:** [March 13, 2017, 4:53pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/4 "2017-03-13T16:53:00Z")

</div>

@benluoma Were you able to get this resolved?

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

---

<div class="post-metadata">

**Author:** ![benluoma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/benluoma/32/4525_2.png) [@benluoma](https://community.localwp.com/u/benluoma)\
**Post date:** [March 13, 2017, 8:19pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/5 "2017-03-13T20:19:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victorbureau](https://avatars.discourse-cdn.com/v4/letter/v/aca169/32.png) [@victorbureau](https://community.localwp.com/u/victorbureau)\
**Post date:** [March 13, 2017, 9:43pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/6 "2017-03-13T21:43:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Robinw](https://avatars.discourse-cdn.com/v4/letter/r/41988e/32.png) [@Robinw](https://community.localwp.com/u/Robinw)\
**Post date:** [June 29, 2017, 10:45am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/7 "2017-06-29T10:45:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![simonb](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/simonb/32/4864_2.png) [@simonb](https://community.localwp.com/u/simonb)\
**Post date:** [September 11, 2017, 9:37pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/8 "2017-09-11T21:37:25Z")

</div>

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](https://gist.github.com/lumpysimon/cf9887c63a345d1f933eafad45894970)

---

<div class="post-metadata">

**Author:** ![ibes](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/ibes/32/7988_2.png) [@ibes](https://community.localwp.com/u/ibes)\
**Post date:** [September 12, 2017, 9:35am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/9 "2017-09-12T09:35:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dyl4n](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@dyl4n](https://community.localwp.com/u/dyl4n)\
**Post date:** [September 13, 2017, 11:27am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/10 "2017-09-13T11:27:09Z")

</div>

Hi ibes,

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

---

<div class="post-metadata">

**Author:** ![dyl4n](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@dyl4n](https://community.localwp.com/u/dyl4n)\
**Post date:** [September 13, 2017, 11:28am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/11 "2017-09-13T11:28:02Z")

</div>

have you found a working solution ben?

---

<div class="post-metadata">

**Author:** ![benluoma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/benluoma/32/4525_2.png) [@benluoma](https://community.localwp.com/u/benluoma)\
**Post date:** [September 13, 2017, 6:59pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/12 "2017-09-13T18:59:16Z")

</div>

Sorry for the delayed responses but yes… I found success in @jasperridge’s solution of using WPGulp [https://github.com/ahmadawais/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.

---

<div class="post-metadata">

**Author:** ![dyl4n](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@dyl4n](https://community.localwp.com/u/dyl4n)\
**Post date:** [September 15, 2017, 5:04am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/13 "2017-09-15T05:04:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kbooshco](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/kbooshco/32/1573_2.png) [@kbooshco](https://community.localwp.com/u/kbooshco)\
**Post date:** [September 17, 2017, 6:00pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/14 "2017-09-17T18:00:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kbooshco](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/kbooshco/32/1573_2.png) [@kbooshco](https://community.localwp.com/u/kbooshco)\
**Post date:** [September 17, 2017, 6:09pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/15 "2017-09-17T18:09:58Z")

</div>

Hi, here’s a link to my set up that I use to build [do22.co](https://do22.co). Hope you can make to suit your needs.

[22 by Kabolobari Bitbucket Repo](https://bitbucket.org/ooshphilosophy/localdev/src/)

---

<div class="post-metadata">

**Author:** ![mrahmadawais](https://sea1.discourse-cdn.com/flex019/user_avatar/community.localwp.com/mrahmadawais/32/2592_2.png) [@mrahmadawais](https://community.localwp.com/u/mrahmadawais)\
**Post date:** [January 15, 2018, 5:29am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/16 "2018-01-15T05:29:32Z")

</div>

Hey, folks!👋

Late to the party here — developer of [WPGulp](https://github.com/ahmadawais/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 🙂  
@jasperridgeYay! Thanks for the share! 🙌  
@kbooshco That’s very kind of you to say! 💯

👉 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 → [🚀 WPGulp 2.0 Goals + Call for Contributors! #61](https://github.com/ahmadawais/WPGulp/issues/61). Feel free to join in.

Let me know of you have any questions. 🙌

---

<div class="post-metadata">

**Author:** ![defenestrated](https://avatars.discourse-cdn.com/v4/letter/d/919ad9/32.png) [@defenestrated](https://community.localwp.com/u/defenestrated)\
**Post date:** [April 5, 2018, 9:36pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/17 "2018-04-05T21:36:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![lukespoor](https://avatars.discourse-cdn.com/v4/letter/l/839c29/32.png) [@lukespoor](https://community.localwp.com/u/lukespoor)\
**Post date:** [April 10, 2018, 10:00am UTC](https://community.localwp.com/t/gulp-and-browsersync/778/18 "2018-04-10T10:00:47Z")

</div>

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](https://pastebin.com/B9fCf6Jw)

---

<div class="post-metadata">

**Author:** ![codeshed](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@codeshed](https://community.localwp.com/u/codeshed)\
**Post date:** [May 1, 2020, 7:48pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/19 "2020-05-01T19:48:03Z")

</div>

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/_”’);  
}  
})

---

<div class="post-metadata">

**Author:** ![claytoncollie1](https://avatars.discourse-cdn.com/v4/letter/c/3bc359/32.png) [@claytoncollie1](https://community.localwp.com/u/claytoncollie1)\
**Post date:** [May 25, 2020, 6:26pm UTC](https://community.localwp.com/t/gulp-and-browsersync/778/20 "2020-05-25T18:26:02Z")

</div>

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!
