I’m busy creating a new project using the Sage theme and have installed all the required dependencies.
The problem I’m having is that browser sync is not refreshing once the new css is injected.
Browser sync is working as I have tried it across different browsers and the iOS simulator and can see the scrolling and page clicking happen live but whenever I make I change to a .less file and it is compiled I get a notification the browser sync has injected the new main.css file but nothing changes on the site.
Is there anything I can try?
For reference, I’m running OS X 10.10.2 and Chrome 41.0.2272.76 and my dev environment is VVV-apache.
Wondering if you resolved this because I’m experiencing the same thing on a fresh Trellis project.
When I run gulp watch on an older AMP setup and just work on the theme, it works perfectly and is very smooth. The moment I move it over to a VM it doesn’t even reload. Even directly accessing various pages using the BrowserSync URLs is very slow.
I did try changing my VM’s CPU cores as @fullyint suggested but that did not help. I tried 1 and 2 and neither had any noticeable effect.
I even tried setting reloadDelay: 1000 because this Github issue mentioned it might be a culprit, but it didn’t help at all.
My output after adding debug to gulp and making a quick change:
$ gulp watch
[18:28:29] Using gulpfile ~/Sites/trellis_repf/site/web/app/themes/repb/gulpfile.js
[18:28:29] Starting 'watch'...
[BS] [debug] -> Starting Step: Finding an empty port
[18:28:29] Finished 'watch' after 30 ms
[BS] [debug] Found a free port: 3000
[BS] [debug] Setting Option: port - 3000
[BS] [debug] + Step Complete: Finding an empty port
[BS] [debug] -> Starting Step: Getting an extra port for Proxy
[BS] [debug] + Step Complete: Getting an extra port for Proxy
[BS] [debug] -> Starting Step: Checking online status
[BS] [debug] Resolved www.google.com, setting online: true
[BS] [debug] Setting Option: online - true
[BS] [debug] + Step Complete: Checking online status
[BS] [debug] -> Starting Step: Resolve user plugins from options
[BS] [debug] + Step Complete: Resolve user plugins from options
[BS] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
[BS] [debug] Setting multiple Options
[BS] [debug] + Step Complete: Set Urls and other options that rely on port/online status
[BS] [debug] -> Starting Step: Setting Internal Events
[BS] [debug] + Step Complete: Setting Internal Events
[BS] [debug] -> Starting Step: Setting file watchers
[BS] [debug] + Step Complete: Setting file watchers
[BS] [debug] -> Starting Step: Merging middlewares from core + plugins
[BS] [debug] Setting Option: middleware - List []
[BS] [debug] + Step Complete: Merging middlewares from core + plugins
[BS] [debug] -> Starting Step: Setting the rewrite rules given in initial options
[BS] [debug] + Step Complete: Setting the rewrite rules given in initial options
[BS] [debug] -> Starting Step: Setting the rewrite rules middleware for snippet
[BS] [debug] + Step Complete: Setting the rewrite rules middleware for snippet
[BS] [debug] -> Starting Step: Starting the Server
[BS] [debug] Proxy running, proxing: http://repf.dev
[BS] [debug] Running mode: PROXY
[BS] [debug] + Step Complete: Starting the Server
[BS] [debug] -> Starting Step: Adding serve static middlewares
[BS] [debug] + Step Complete: Adding serve static middlewares
[BS] [debug] -> Starting Step: Starting the HTTPS Tunnel
[BS] [debug] + Step Complete: Starting the HTTPS Tunnel
[BS] [debug] -> Starting Step: Starting the web-socket server
[BS] [debug] Setting Option: clientEvents - List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[BS] [debug] + Step Complete: Starting the web-socket server
[BS] [debug] -> Starting Step: Adding the HTTP protocol
[BS] [debug] + Step Complete: Adding the HTTP protocol
[BS] [debug] -> Starting Step: Starting the UI
[BS] [debug] Setting Option: session - 1454282909978
[BS] [UI] Starting Step: Setting default plugins
[BS] [UI] Step Complete: Setting default plugins
[BS] [UI] Starting Step: Finding a free port
[BS] [UI] Step Complete: Finding a free port
[BS] [UI] Starting Step: Setting options also relevant to UI from BS
[BS] [UI] Step Complete: Setting options also relevant to UI from BS
[BS] [UI] Starting Step: Setting available URLS for UI
[BS] [debug] Getting option via path: urls
[BS] [UI] Step Complete: Setting available URLS for UI
[BS] [UI] Starting Step: Starting the Control Panel Server
[BS] [UI] Using port 3001
[BS] [UI] Step Complete: Starting the Control Panel Server
[BS] [UI] Starting Step: Add element events
[BS] [UI] Step Complete: Add element events
[BS] [UI] Starting Step: Registering default plugins
[BS] [debug] Getting option via path: urls,external
[BS] [UI] Step Complete: Registering default plugins
[BS] [UI] Starting Step: Add options setting event
[BS] [UI] Step Complete: Add options setting event
[BS] [debug] + Step Complete: Starting the UI
[BS] [debug] -> Starting Step: Merge UI settings
[BS] [debug] Setting Option: urls - Map { "local": "http://localhost:3000", "external": "http://192.168.1.73:3000", "ui": "http://localhost:3001", "ui-external": "http://192.168.1.73:3001" }
[BS] [debug] + Step Complete: Merge UI settings
[BS] [debug] -> Starting Step: Init user plugins
[BS] [debug] Setting Option: userPlugins -
[BS] [debug] + Step Complete: Init user plugins
[BS] Proxying: http://repf.dev
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.73:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.73:3001
-------------------------------------
[BS] Watching files...
[BS] Browser Connected: Chrome, version: 48.0.2564.97
[18:32:03] Starting 'wiredep'...
[18:32:03] Finished 'wiredep' after 100 ms
[18:32:03] Starting 'styles'...
[BS] 1 file changed (main.css)
[18:32:06] Finished 'styles' after 2.21 s
Updating to the latest Vagrant and VirtualBox helped. BrowserSync now refreshes, but it’s extremely slow and navigating using the BrowserSync proxy is also slow (about the same speed as before).
I’m running into this same issue. It only affects styles, js and php changes work as expected. I upgraded to the latest virtualbox and vagrant - and am already using the latest trellis - but the problem persists.
virtualbox: Version 5.0.14 r105127
vagrant: Vagrant 1.8.1
ansible: ansible 2.0.0.2
Finally tracked my issue down to using the wp-offload-s3 plugin, which offloaded the css to an S3 bucket, so browsersync saw no local file to update. Once I disabled the plugin, gulp + browsersync worked as expected. It does take awhile to load (24 seconds initially, 23 seconds after making the change recommended, here: https://github.com/roots/trellis/commit/7228fdb343acb49712866056870b0ae73c51d5f1), but it works and I can dev on local again!
I know this is an older post but I’m having the same issue Sam described. BrowserSync isn’t injecting CSS changes, though other file types are processed just fine.
The only plugin I’m running is Soil. I’ve updated vagrant and virtualbox, it’s a fresh install of trellis/bedrock/sage pulled today.
I’m honestly not sure what is happening. I make changes in the .scss files (_header.scss for instance), the task triggers in the Terminal, and I get this result:
[13:30:00] Starting ‘wiredep’…
[13:30:00] Finished ‘wiredep’ after 7.83 ms
[13:30:00] Starting ‘styles’…
[BS] 1 file changed (main.css)
[13:30:03] Finished ‘styles’ after 3.25 s
But no changes injected on the page. I checked the page source and it is pulling styles from here:
/app/themes/sage/dist/styles/main-40461e6707.css
instead of just main.css.
This solution from an older thread didn’t work either:
Also, I’m not sure if this is pertinent, but I had to comment out 1:: localhost from my Hosts file to get Browser Sync to actually load the page at all.
Any direction in how to fix this would be appreciated.
