Browser-sync: BrowserSync is watching, but doesn't track changes to my CSS file

[gentle-media]

Hi,

I know its here for issues and not for Q&A, but I don't know where else I have to ask a question related to browser sync. Apologies for that, but hopefully someone can assist me

My command line skills are 0.something, but I managed to get everything installed and up & running and have the following output, because I have a localhost with a sub directory 'artisan' (my project)

unknown-00-23-6c-99-68-e4:~ user$ browser-sync start --proxy="localhost:8888" --files="artisan/css/*.css"
[BS] Proxying: http://localhost:8888
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.1.64:3000
[BS] Watching files...

Like I said it works to some extend... I can open the Artisan website in the browser with the new local and/or external URL and see the 'connected to browsersync' notification, but changes I make and save in the css file, doesn't automatically refresh/change the page that's open and neither do the changes gets added to the command line.

Thus... I'm very confused and hopefully someone can see or can guess where I go wrong. Thanks!

[shakyShane]

File paths are relative to your current working directory

so if you're inside the directory artisan when you start BrowserSync, the files argument should be --files="css/*.css"

Does that help?

[gentle-media]

Thanks for your reply and I appreciate your help!
I assume it's a path issue too and I should have mentioned that I tried already several files arguments myself including the one you wrote here.

I have a folder named 'websites' with subdirectories as my website projects such as 'artisan'. I've pointed MAMP to the directory 'websites' as my localhost:8888.

If I connect BrowserSync in the terminal, it opens http://localhost:3000/ Index of / page, where I see the subdirectories of 'websites' folder and clicking on the 'artisan' directory opens the website, but no CSS syncing or whatsoever..

No matter what I do with the files or proxy argument it opens with the Index of /
I thought that this would do something, but also opens just http://localhost:3000 with the Index of / subdirectories

browser-sync start --proxy="localhost:8888/artisan/" --files="css/*.css"

So I'm not sure what path to try next. The connection works fine I guess. I can access the external URL on my smartphone, but changes do not appear.

[shakyShane]

You can ignore the browser's response to any file changes for now, until you see some console output about the changed file it will never work.

the files argument has no real connection to the actual website, all BrowserSync does when it sees a changed file like any/path/whatever/core.css is look in the current page for a link tag that contains core.css. So, is the css file you change _actually_ referenced in the DOM? and do you see Connected to BrowserSync in the top right-hand-side of the window?

[gentle-media]

I use history.js from (or actually the whole demo files from) https://github.com/devote/HTML5-History-API for this website. A file (bootstrap.php) makes some path changes to the server and it does some URL rewriting via .htaccess , but the css file gets in the end referenced in the DOM as

<link href="/artisan/css/main.css" rel="stylesheet" />

I thought it didn't work because of all these History (AJAX) files, so I checked BrowserSync with another, but very basic, website but the same problem. No responses in the browser after file changes and neither in the Terminal.

Like I said I see the 'Connected to BrowserSync' message in the top/right corner, I can use the external URL on my phone and 'it's watching' as you can see, so I assume that's all working as it should.

[gentle-media]

Sorry, but the path to the CSS file i wrote above is when I viewed 'the source'.

In the DOM it is like this (according to 'Inspect element' in Chrome):

<style media data-href="/artisan/css/main.css"></style>

Not sure if that's a normal output or not :(

[shakyShane]

Yep ^ that's your problem. BrowserSync only looks for <link> tags when updating CSS.

[gentle-media]

Ooohkay... not sure what is changing it in the DOM and why it's changing it. I will look into that. Thanks so much for your time @shakyShane.

[shakyShane]

Good luck :+1:

[gentle-media]

Thanks! I use prefixfree.js which is inserting these style tags to inject the altered CSS. I disabled prefixfree for now, but still no luck so far. Anyway.. I will stop wasting your time. :)

[shakyShane]

You're not wasting my time - I'm happy to help if I can :)

[gentle-media]

Awesome ;)
So... after I disabled prefixfree, I still have issues with the auto-change of the CSS. I checked also with another website, which is a very basic one. No History object / AJAX / URL rewriting and such... just plain PHP.

I tried the following to connect and it connects with the 'connected to BrowserSync' message as confirmation.

browser-sync start --proxy="localhost:8888/artisan/" --files="css/*.css"
[BS] Proxying: http://localhost:8888
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.1.64:3000
[BS] Watching files...

and also without a forward slash at the end of the proxy URL.

[karneaud]

i am experiencing a similar issue using yoeman/grunt grunt-browser-sync on a XAMPP server. Everything works except when auto refreshing when I edit js/ html or css as you explained. Were you able to solve this issue?

[gentle-media]

@karneaud - Syncing did work for me too, but I never got the auto refresh part working.

[gabrielgiordan]

I have experienced a similar issue, and the solution was too simple. If you are running on windows, be sure to run the cmd as an administrator. After I did this, the sync feature ran fine.

[ccjmne]

@gabrielgiordan You just saved my day!

[nikonov91-dev]

Hi there, i had such issue not only with css but also html or js (browsersync doesnt reload pages)
I added some lines to solve this issue:

gulp.task('default', ['syncReload'], ()=>{
  gulp.watch('sass/**/*.scss', ['syncReload']) 
  gulp.watch('**/*.html', ['syncReload'])
  gulp.watch('js/**/*.js', ['syncReload'])
  sync.init({ server: "./" })
})
gulp.task('syncReload', () => {
  sync.reload()
  console.log('reloaded page')
})

But my solution makes my laptop hot, i dont know ho to improve it yet.
finally i got my _gulpfile.js_ configurations next:

const gulp = require('gulp');
const sass = require('gulp-sass')//переменные названия команды
const autoprefixer = require('gulp-autoprefixer')
const sync = require('browser-sync').create();
const jasmine = require('gulp-jasmine-phantom')

sync.stream()

gulp.task('default', ['styles', 'syncReload'], ()=>{
  gulp.watch('sass/**/*.scss', ['styles', 'syncReload']) 
  gulp.watch('**/*.html', ['syncReload'])
  gulp.watch('js/**/*.js', ['syncReload'])
  sync.init({ server: "./" })
})

gulp.task('styles', () => {
  gulp.src('sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
            browsers:['last 2 versions']}))
    .pipe(gulp.dest('./css'))
})

gulp.task('tests', () => {
  gulp.src('tests/spec/extraSpec.js')
    .pipe(jasmine({
      integration: true,//if false it tests nodejs code only
      vendor: 'js/**/'
    }))
})

gulp.task('syncReload', () => {
  sync.reload()
  console.log('reloaded page')
})