browsersync / browser-sync Goto Github PK
View Code? Open in Web Editor NEWKeep multiple browsers & devices in sync when building websites. https://browsersync.io
Home Page: https://discord.gg/2d2xUThp
License: Apache License 2.0
Keep multiple browsers & devices in sync when building websites. https://browsersync.io
Home Page: https://discord.gg/2d2xUThp
License: Apache License 2.0
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.
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:
There's also growl etc...
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?
It is possible to use browser-sync with an asp.net MVC application.
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?
Confirmed bug. Must broaden search for input's to include next HTML5 types
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.
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.
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!
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 ?
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)
Hoping this will remove the issue with ruby-based sass-compilers
Currently checks if locations are identical before syncing scroll - it would make more sense to ignore hashes/query strings on urls
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
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?
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
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.
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"
]
}
}
I'm a fan of using a separate option for providing globs that should be excluded.
files: ["**/*"],
exclude: ["node_modules", "bower_components"]
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.
It should not try to inject css when the file is not included. I suppose a simple
if (typeof elem !== "undefined")
would suffice.
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
Maybe consider a solution as described here:
#22
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.
module.exports = {
files: [".html", ".css", "*.jsp"]
debugInfo: true,
host: "192.168.1.144",
ghostMode: {
links: true,
forms: true,
scroll: true
}
open: true,
notify: true
};
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.
Not watching any files...
Browser Connected! (Chrome, version: 31.0.1650.63)
Browser Connected! (Mobile Safari, version: 7.0)
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?
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.
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.
index.html is fine
index.htm is 404'in
Do you have a nodejs api that can be require
ed ?
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?
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
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.
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?
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?
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.
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?
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)
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?
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?
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!
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!
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.
use https://npmjs.org/package/inquirer to build/write a config file for a project
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.
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.
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)
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".
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.
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)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.