browsersync / browser-sync Goto Github PK

View Code? Open in Web Editor NEW

12.1K 12.1K 752.0 14.35 MB

Keep multiple browsers & devices in sync when building websites. https://browsersync.io

Home Page: https://discord.gg/2d2xUThp

License: Apache License 2.0

JavaScript 75.98% CSS 1.61% Shell 0.11% HTML 5.19% TypeScript 10.27% Handlebars 3.43% SCSS 3.40%

browser-sync's Introduction

Keep multiple browsers & devices in sync when building websites.

Follow @Browsersync on twitter for news & updates.

Ask questions on Discord

Features

Please visit browsersync.io for a full run-down of features

Requirements

Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions

Upgrading from 1.x to 2.x ?

Providing you haven't accessed any internal properties, everything will just work as there are no breaking changes to the public API. Internally however, we now use an immutable data structure for storing/retrieving options. So whereas before you could access urls like this...

browserSync({server: true}, function(err, bs) {
  console.log(bs.options.urls.local);
});

... you now access them in the following way:

browserSync({server: true}, function(err, bs) {
  console.log(bs.options.getIn(["urls", "local"]));
});

Install and trouble shooting

browsersync.io docs

Integrations / recipes

Browsersync recipes

Support

If you've found Browser-sync useful and would like to contribute to its continued development & support, please feel free to send a donation of any size - it would be greatly appreciated!

Support via PayPal

Supported by

Originally supported by JH - they provided financial support as well as access to a professional designer to help with Branding.

browser-sync's People

Contributors

Stargazers

Watchers

Forkers

gowda24 vj-chandera polikin leikam hesselbom larz0 ideesimple todonoticias msrafi zmilan creativebraininc adamg511 vinniewrote andreasdriesen keeyawangjones bradparks thenyel cdoru randylien ubiratanbraga crvidya psyrendust andiio javiertejero pionine sirithink tung-nguyen web5design shahw rodrigomilfont netconstructor chuckhendo jeffbcross huglester yashilanka geekybeaver bvfeds jayism jory asherbond eminus mericson klingen2 smoclock konstantinos-tsatsarounos majorye hugomrdias morozd grscl emptimd cwspear jjsanbra darthraw mleonizio piers-shepherd-sift jeremypeter marek-saji osean manadan999 bloodbare aamirshah sneridagh arrmac tondog smiler158 greypants egaba vincehu stuartnz ui-frontend yorkie paulkinlan nova-ah motleydev ryanoliver jlertle njam nurtext shreyasubale microinfo woerwin noscripter morrislaptop praveenvijayan mrdotl swaddell sc5 ocombe schetnikovich lonjoy asabaylus benjamine pkaleta limingzhou fabienkruba stratospark adam-lynch dlpc peterblazejewicz simshanith

browser-sync's Issues

Switch to Gaze for file-watching/globbing

Hoping this will remove the issue with ruby-based sass-compilers

Working with Remote Hosts?

I apologize if this has been covered, but I am curious if this is possible:

BrowserSync is connected fine, I have different browsers scrolling and opening links together perfectly. Where I'm stuck is the CSS injecting part.

It works great when a site is hosted locally, but when the site isn't local nothing happens, even though the status message appears in the window.

Is it possible to inject CSS into remote hosts? Do I need to host the CSS locally in order to inject it into a remote host? The app version of LiveReload and Takana can both do this, so I know it's possible in general, I'm just not sure if BrowserSync has an option to do so.

Thanks!

does not index.htm with server

index.html is fine

index.htm is 404'in

JS Error when updating non-included css

Problem

When using it in a project that updated two files, style.css and print.css, but only one was included in the html ( ) I got the following JS error:

Uncaught TypeError: Cannot read property 'href' of null

I tracked it down to this line (line 106):

transformedElem = actions.swapFile(elem, domData.attr);

And 'elem' here is null, probably because I'm not including the print.css anywhere.

Expected result

It should not try to inject css when the file is not included. I suppose a simple

if (typeof elem !== "undefined")

would suffice.

Serving multiple directories

Hi,

It's possible to make the browser-sync serve multiple directories as bellow:

server: {
 baseDir: [
   '<%= path.temp %>',
   '<%= path.app %>'
 ]
},

I know its uses connect as server, so maybe there's a way to make it serve from two directories.

In my case, i have some compile files in the .tmp directory and the assets in the app directory.

Thank you guys.

Does not sync input if type="email"

Confirmed bug. Must broaden search for input's to include next HTML5 types

jquery .ajax() failing

All jquery .ajax() calls fail. Using the same code on another server is successful.
The xhr object doesn't return anything meaningful other than statusText = "error".

Files does not allow ".." in path

Browser sync does not detect changes when I use ".." in the path:
browser-sync --files "../static/*.css"

This even does not work, when I am in the path project/static/ (which would make the ../static/ go into the current path)

mod-rewrite support

Hi. I'd like to use this library in a MAMP project with mod-rewrite, so some assets files paths are not the same in the server and in the browser. For example:
/assets/cache/css/styles.css in the browser is /assets/css/styles.css in the server. There can be also some files pointing to the same file (I have a css preproccessor that inject imported css) so some files in the server (for example: base.css, grid.css, etc) can be just one file in the browser.
Is there any way to map the watched files to create alias between server and browser files?. Some like this (just an idea):

module.exports = {
    files: {
        "assets/cache/css/styles.css": [
            "assets/css/base.css",
            "assets/css/grid.css"
        ],
        "assets/cache/css/styles2.css": [
            "assets/css2/*.css"
        ]
    }
}

Does not sync scroll if # in url

Currently checks if locations are identical before syncing scroll - it would make more sense to ignore hashes/query strings on urls

Node API

Do you have a nodejs api that can be requireed ?

Issues with CORS in proxy mode

In proxy mode, there seems to be possible to get into issues with CORS : if the code on the server side checks for Origin and sends the Access-Control-Allow-Origin header accordingly, the request could fail.

Would it be possible (or event a good idead) to make browser-sync detect and rewrite the header to match its own address ?

No notifications

It might be handy to have a small on-screen notice or console log to keep track of successful css injection.

I'm thinking of times when you change some css & nothing changes on screen. Now you are unsure whether the injection worked, or whether the CSS rule didn't make a difference.

Possible options:

quick on screen notification when css is injected.
console.log message when css is injected.
I see the on-screen message being useful when working with touch devices (that don't have a console to view the message) & when working with older IE browsers.

There's also growl etc...

Does not work with <style> @import url("..."); </style>

This is a great tool. However, it would be even better if it supported @import's of stylesheets.

I realize that including stylesheets this way is not optimal, but it does get around IE's limitation of 31 stylesheets, and is useful when in development - particularly with CMS's that include a lot of stylesheets.

When I downloaded this tool to try it out I was working on a Drupal project, which happens to do this until you turn on CSS aggregation. But at that point it also changes the name of the CSS files and caches them.

I took a look at modifying browser-sync-client.js but it seems like it's really only setup for altering <link> elements and ran short on time.

Thanks!

no update. working with Wordpress site using 127.0.0.1

OK so im running a local development Wordpress site using 127.0.0.1. as localhost. site works fine that way

I setup browsersync fine when its in same folder ad my css files, but now I have to figure out how to do it in a WordPress setup where I assume one has to put the browser-sync in the core root folder right? and point the path to the files to update to the wp-content/themes/child-theme/*.css right?

I did this and finally got it to watch the files and say im connected to firefox browser..but the onion is...no updates when i change/save the css files.

Am I setup wrong somehow? I even tried using 192.168.1.65:3001 and that didnt work.

If anyone got it to work with wordpress installed using localhost, let me know if it worked and how you did it please. For now I cant get it to update, even though it reports its connected and watching files.

Conflict when used on the same page as RequireJS

Getting this error:

Uncaught Error: Mismatched anonymous define() module: function () { return io; }
http://requirejs.org/docs/errors.html#mismatch

Seems to be a known bug with socket.io - needs more research

Cannot GET

I can't get around the browser saying:
Cannot GET /mvyc/add-members.php

my config file is:
module.exports = {
files: "*.css",
debugInfo: true,
host: "192.168.1.65",
ghostMode: {
links: true,
forms: true,
scroll: true
},
server: {
baseDir: "./mvyc"
},
open: true
};

ive tried different variations of the directory im in for baseDir setting. ive set it at:

mvyc, and ./, and nothing and at most the command line says its watching 1 file, but the browser doesn't seem to be able to connect. is this a firewall thing or something else.

Syncing all events

The project I am working on is what you might class as a one-page web app, so there is a lot of functionality (think google earth style) that needs testing across browsers. Is there any way that you could sync events and clicks rather than just changing page?

URL sync should work with back buttons and other methods of navigation

Browser-sync just synchronize URLs between gadgets when you click a link. It should work with back history buttons and other methods of navigation, such as hard entered addresses.

Using it with asp.net web MVC application

It is possible to use browser-sync with an asp.net MVC application.

Sync browser does not work

I install the most recent version and I noticed that since version 0.5.x the detection of browsers so that the injection of CSS does not work anymore.

The configuration parameters in Grunt or HTML tags are changed?

Does not work with versionized assets

Today I realized that I cannot use your cool tool at all because all my assets are version-ized with https://github.com/yeoman/grunt-filerev

Each time an asset changes, a new version is generated and the older version becomes obsolete. In other words, I have to hit reload in the browser to load the newer version with a new URL.

This is something your module cannot deal with (yet?). The biggest problem is the HTML snippet pointing to the old asset.

For example we have this:

<link rel="stylesheet" href="/styles/site.min.fd094e44.css">

When I modify the LESS file, compile it, and grunt-filerev is giving it a new version, then site.min.fd094e44.css is deleted in the styles folder and a new file something like site.min.34a024e41.css is generated. And that's the problem: How can we fix the href attribute to point to the newer version live?

I can imagine a solution: Look up versions via a JSON file

grunt-filerev is already storing versions in a JSON file something like this:

{"/styles/site.css":"/styles/site.b0693088.css"}

In other words, introduce a new option which watches that JSON file and corrects the href attributes in the HTML when needed before the sync.

What do you think?

excluding files/dirs should a separate option

I'm a fan of using a separate option for providing globs that should be excluded.

    files: ["**/*"],
    exclude: ["node_modules", "bower_components"]

Better scroll sync on different screens

I'm testing my website across multiple devices and browser-sync is helping me a lot. But, as they have different screen sizes, I found scroll could be better synced.

For example: When scrolling to the bottom of the page on my 21,5" display, the page is just in the middle on my iPad.

Maybe we should use some proportional values to better sync the scroll. Do you see any drawbacks on this?

Thanks

Unable to sync other devices

Hi,

I am looking at using Browser-Sync for performing synchronized testing across multiple browsers and devices. I've installed browser-sync on my machine and tried to synchronize a sample application I created.

I created the config file "test.js" (see below) and placed in the same directory where .html, .css and .jsp are stored.

test.js

module.exports = {
files: [".html", ".css", "*.jsp"]
debugInfo: true,
host: "192.168.1.144",
ghostMode: {
links: true,
forms: true,
scroll: true
}
open: true,
notify: true
};

After that I executed the command "browser-sync --config test.js" (See below output)

C:\Users\xxxx>browser-sync --config test.js
info - socket.io started

All Set Up! Now copy & paste this snippet just before the closing tag i
your website.

I placed the script tag code in the .html, .jsp file as mentioned above
4.) I pulled up the sample application in Chrome and in my Iphone 5. I see that the application is connected. (See below output)

Not watching any files...
Browser Connected! (Chrome, version: 31.0.1650.63)
Browser Connected! (Mobile Safari, version: 7.0)

Now when I perform any action in the Chrome browser (lets say enter form data or click button), I see that the action is NOT performed in my iphone5. It is not synching with the iphone 5 device.

I am not sure what I am doing wrong or missing anything. Can you please help me out. Do you have any good documentation that I can go through?

using browser sync with rails - asset pipeline

I'm trying to use browser sync with rails, using the asset pipeline.

Rails compiles css when they are requested, so it's not possible to give a path to the file before compilation.

files: ["rails/doesnt/have/the/css/yet/application.css", ],

If I point the config towards the sass file, the page reloads rather than injecting the changes.

files: ["assets/application.scss", ],

this may be more of an issue with rails rather than an issue with browser sync but is it possible to avoid the page reload when watching sass rather than css files?

Expose host IP and port numbers through API

When using the JS API via require('browser-sync'), there should be some official way to get the host IP and port numbers that the BrowserSync server is listening on. I didn't notice any ways to do this from browsing through the code. Am I missing anything?

I see a couple of options:

Allow the user to specify a callback function in the userConfig object when calling init, for example:

var browserSync = require('browser-sync');
var config = browserSync.defaultConfig;
config.initialized = function(ip, ports) {
  // Do stuff.
};
browserSync.init([], config);

Return the browserSync object in browser-sync.js from the init function and have it implement the EventEmitter pattern, for example:

var browserSync = require('browser-sync');
var server = browserSync.init([], null);
server.on('initialized', function(ip, ports) {
  // Do stuff.
});

As an extension of 2, Expose ip and ports properties on the browserSync object itself, for example:

var browserSync = require('browser-sync');
var server = browserSync.init([], null);
// Sometime later...
console.log(server.ip);
console.log(server.ports);

1 is simple and should just work. 2 & 3 provide a slightly cleaner path to future extensibility (e.g. adding another event for new browser connections).

As a side note, I found myself needing this while writing a Connect middleware plugin to automatically inject the required BrowserSync scripts into the body of the response HTML (similar to connect-livereload) for Connect-based servers.

Thoughts? I'm happy to submit a patch if we can settle on an interface.

Thanks for your work this project!
Chris

Browser-sync with WAMP

I just downloaded browser-sync (windows 7, wamp. ST2, gitbash) and that seemed to go OK. I went into a local site folder and set it to watch all css files

browser-sync --files "app/css/*.css" --server

and that seemed to go OK and I got 'Serving files from...[the correct folder], Go load a browser & check back here...etc'. I then opened the site in Firefox but the sync is not working.

Is there a particular way I have to load the browser to make it work?

File not Found would start a redirect

Hi i not 100% clear why, but when i include Background Images (with Libsass or ruby-sass) and the files are not availables (maybe a wrong filename), Browser-Sync redirect to the Folder.

E.g I have inside 'assets/img/single/' the Images. When the File is not available, Browser-Sync redirect to
"http://192.168.0.1:3001/assets/img/single/".

Is this a normal Behavior or a fault in the gulp config?

does not accept multiple file globs in command-line mode

I want this to work

browser-sync --files "*.php, *.js, *.css"

Right now, it can only process a single glob when passed through command-line.

Click on element (addClass, hover, toggleClass, etc) with jQuery doesn't work

If I add an hover effect or addClass with jQuery onClick on a element in my code.. it's doesn't work on every browser when I try to see the effect.

Cannot connect from two hosts with the same browser

I'm using browser-sync in server mode.

When trying to connect from two different hosts using the same browser, only first one seems to be registered.

When I try to connect using any other browser from second host, it appears as connected without any problem.

'browser-sync --version' doesn't do what you'd expect

focus on input fields should be synced

It's easy to do cross-browser in JS, so no reason to leave this out - would be a big help when inputs have custom :focus styling

BrowserSync should check if updates are available

Bower does it best. Every time you run it, you get

Really important considering how quickly we are fixing bugs.

Fonts in IE 8

In IE 8 only, a font that was included in sass file with @font-face is not displaying. I do not see the same issue in IE 8 while using Ghostlab.

Thank you for this amazing project!

How to watch files different than index.html

Hello,

In my config file I have files: "*", since I have several HTML files in addition to index.html.

But how do I make Browser Sync watch these other files that have different names? i.e. about.html, contact.html, etc.

I remember when I was learning (and I still am as you obviously tell) how to get Browser Sync to work I was able to just double click on any of my HTML files, make changes to them and they would then get refreshed... but I honestly forgot how I made that happen.

Any help is greatly appreciated.

Thanks.

browser-sync init should be interactive

use https://npmjs.org/package/inquirer to build/write a config file for a project

Provide an option in the config file to disable timestamp when injecting a new css file

With my workflow any changes I make in chrome-devtools gets automatically pushed to all the devices that are currently connected using browser-sync.

Because I am using chrome-workspaces to map any changes I make in chrome-devtools to the actual sourcefile, when browser-sync injects the new css file, the css-changes do not get tracked after the first injection. And I believe it is because browser-sync injects a new css file which is timestamped. Removing the timestamp ensures that css changes get tracked even after the first css injection as any changes I make are written still to the actual source file.

I have removed the timestamp and tested in couple of devices and few of the devices that don't work or do not fetch the most current css files are:

Windows phone 7.5
Android native browser< version 4.4 (However Chrome browser in these devices seem to work fine)

Mobile Device (iPhone) Cant Connect

Hi,

I tried via web interface everything works smootly, but it doesn't work on mobile device

My setup:
Rails 4 application

// browser-sync --config browser_sync.js --server
module.exports = {
    files: "app/assets/stylesheets/*.css, app/assets/javascripts/*.js, app/views/**/*.html.erb",
    host: "127.0.0.1",
    debugInfo: true,
    ghostMode: {
        links: true,
        forms: true,
        scroll: true
    },
    server: {
        baseDir: "app"
    }
};

So, on the terminal; I can see only Chrome (web) connected. How to make it work with mobile device on same network?

Watching the following:
app/assets/stylesheets/*.css
app/assets/javascripts/*.js
app/views/**/*.html.erb

Browser Connected! (Chrome, version: 31.0.1650.63)

Port problem with Vagrant

Hi, I have the problem, that I can not use the combination browser_sync with Vagrant. Here is the port 7070 specified. but browser_sync opens/listens the port 3001 or 3002 and an error message is "Cannot GET /". Does anyone have an idea?

Webm/HTML5 video

Hey!

I'm using Browser Sync and I have a project who have some webm files.
Browser sync doesn't seem to allow the request to webm files.

Here is what Chrome dev tools are saying:
video.webm
/video
GET
(canceled)
video/webm
10.0.51.8:40
Parser
2.2 MB
2.2 MB
246 ms
30 ms

What is the workaround to allow them?
If there is none, I think this is an issue!

Thanks per advance.

(Everything is OK with my localhost, without any specific htaccess)

Injected CSS opens in browser.

I've been trying to get browser-sync to work in a very small project and whenever I change the CSS it gets injected but the injected CSS is instantly opened in the browser (Chrome, Canary, Chromium, Firefox) instead of updating the styles.

No clue why this is happening, and after googling for quite some time I haven't found anyone posting anything about this strange problem. I'm unsure if it's related to browser-sync.

Anyway, here's the task snippet that I'm using to serve static files:

# Browser sync.
gulp.task "browser-sync", ->
  browserSync.init [
    "." + glob.html
    dest.styles + glob.css
  ],
  server:
    baseDir: "./"

I'm also using Windows atm, which might be related somehow - who knows.

I would love some help with this issue or guidance on how to debug.

Failed to inject snippet

Please refer to following link:
https://gist.github.com/jihchi/7527573

This simple file is failed to inject script snippets.
If you eliminate 1 character(1 byte), then it can be injected.

prevent mobile sleep

I'm not sure if it's even possible without creating a dedicated mobile app, but would be nice to have browser sync'd sites automatically override a mobile device's power mode so that it stays on without having to change the settings backwards and forwards.

Form-sync only works with ID's on form elements

Maybe consider a solution as described here:
#22

Ajax requests failing

I am using grunt-browser-sync and versions newer than [email protected] cause Chrome to refresh as soon as the page gets loaded—to no end.

I am not sure if other browsers behave the same. Will try to do some tests when I have the time.

should have an option to sync scroll-top position, instead of proportional

We currently have proportional scroll - which is great in most cases but it would sometimes be nice to sync scroll only based on the scroll top position.

I suggest we keep the current method, and add scrolltop as an option.

Files not loaded for devices

I have site on the localhost a Drupal site, when I try to see it on the mobile I get the raw html without css and images.
What is the problem with my configuration? Which property need to me set for it?
The files contains only files: ["css/*.css"].
The drupal has a nested folder structure for example the theme's css files are under sites/all/themes/theme/css/
Maybe is this the problem?

Not detecting changes inside sub folder

Hi,

I'm currently experiencing a weird issue. My setup is this. I have used browser-sync with wordpress.

Inside my wp-content/themes/theme-name folder, i did...
browser-sync init

edited bs-config.js and the files to watch looks like this:

files: ['assets/css/*.css', 'assets/img/*.jpg', 'assets/img/*.png', 'assets/js/*.js', 'templates/*.php', '**/*.php', '*.css']

Now my problem is that whenever I modified php files inside templates/ folder, browser-sync won't reload the browser. It works pretty well on the root theme folder though.

Does browser sync track php files inside a sub folder?