Gulp watch + browsersync: I cant get it working properly

sage
1

Hi all,
i’m fairly new to sage and I discovered gulp and browsersync only some days ago. I think I do a mistake but I cant get gulp watch and browsersync working together semalessly:

  1. I run gulp watch → browsersync starts normally and I can browse the interface and open a new tab with my site
  2. i modifiy _global.less located in assets/styles/common adding red color for h1
  3. browsersync reload my site tab with the new title color

Here is my problem:
I redo point 2 changing just the color to orange, browsersync reloads, ‘injecting main.css’ pops-up but … the title retrurn to the original color: black

Where is my mistake ? Why is it working for the first round and not for the following ‘cycles’ ?
thanks for your help.

2

Are there any errors in your terminal?

3

No I have no errors in my terminal, any idea ?

4

Are you sure orange is spelled correctly? Really not sure what the problem could be.

5

orange is spelled correctly in _global.less, but I realize that main.css injected in my browsersync tab doesn’t contain any modification I did in _global.less.

In fact my modifications in less files (_global.less) are not written in main.css when i’m using gulp watch and it’s apparently why browsersync inject main.css without any change.

Any idea how to correct it ?

6

When in doubt, delete node_modules and run npm install again. Make sure gulp compiles correctly. Make sure node and npm are at least the minimum versions required by Sage.

1 Like
7

I had a similar problem, but I could never get my styles to change at all. My terminal tells me wiredep runs… And finishes… And then 2 files change (main.css, editor-style.css) and then it’s finished, but the changes never happen. I tried delete node_modules and run npm install again along with Gulp to compile and the problem continues.

8

i went and updated my npm and then ran " npm cache clear && rm -rf node_modules && npm install " ran gulp and then gulp watch I changed the body style to see if the styles would be injected. i got in the terminal
[BS] Access URLs:

   Local: http://localhost:3000
External: http://10.0.1.7:3000

      UI: http://localhost:3001

UI External: http://10.0.1.7:3001

[BS] Watching files…
[14:45:16] Starting ‘wiredep’…
[14:45:23] Finished ‘wiredep’ after 7.05 s
[14:45:23] Starting ‘styles’…
[BS] 2 files changed (main.css, editor-style.css)
[14:45:30] Finished ‘styles’ after 6.56 s

but no changes happened in my browser. I’m trying figure out where I went wrong? i am using Bedrock and VM, FYI. I don’t get any errors when installing npm or running gulp.

node -v && npm -v && gulp -v
v0.10.36
2.11.0
[15:00:28] CLI version 3.8.11
[15:00:28] Local version 3.9.0

1 Like
9

I resolved the issue and it had nothing to do with a problem occurring in the sage theme or gulp file what so ever, it was my bad, so sorry for the waste of time anyone spent looking at this.

10

Internet police here :rotating_light: :rotating_light: :rotating_light: — please don’t say you’ve resolved your issue without providing information on how you solved it.

6 Likes
11

I’m having the same problem. I feel I had it working correctly and could make scss changes and they would compile to my dev main.css file but not anymore. How did you fix it?

12

For anyone who is experiencing this problem … make sure that you actually have Sage as your activated theme before running gulp watch … I believe this is what is happening to folks and perhaps no one wants to post up their “doh!” moment publicly … heh

1 Like
13

Also, check that you setup up your dev environment domain in the mainfest.json file under config.devUrl and that it has no typos.

1 Like
14

How do you solve the problem ? Give us the solution…

15

Hi,

Not sure if this problem was ever solved?

Anyway, I have a solution that worked in my case, which may not be the same as other people’s issues…

It was basically a Firewall problem.

I am running my virtual servers in Windows VMware Workstation Pro.

The local VPS servers are all running Ubuntu 14.04 LTS with Nginx as the front end proxy.

I needed to open ports 3000 and 3001 in the VPS firewall.

Also, there is no real DNS in this setup, all the sites are mapped using my Windows Hosts file, and these in turn are mapped to the LAN IP address of the server in the Ubuntu hosts file.

Anyway, long story short, it was just that the server firewall was blocking ports 3000 & 3001

1 Like