command line browser-sync detects changes, doesn't refresh page
I had prefixfree.js included, so it rewrites the css and prevents BS from working.
Unsure about example given on BrowserSync homepage
Yes, according to the documentation, that's a possibility. Off that same page... (make sure you return the stream from your tasks to ensure the browser is reloaded at the correct time) If it's an async task it will just fire and not return anything, and the watcher will not know...
How to make BrowserSync work with an nginx proxy server?
nginx,proxy,gulp,same-origin-policy,browser-sync
To get more control over how opening the page is done, use opn instead of browser sync's mechanism. Something like this (in JS - sorry, my Coffee Script is a bit rusty): browserSync({ server: { // ... }, open: false, port: 3001 }, function (err, bs) { // bs.options.url contains...
How to configure port in browser-sync
Answer based on the documentation links (link1, link2). You are using browser-sync version 2.0+, they have a different recommended syntax. Using that syntax your code could be like this: // require the module as normal var bs = require("browser-sync").create(); .... gulp.task('serve', [], function() { // .init starts the server bs.init({...
Multiple erros in jquery-2.1.0.min.js and browser-sync-client.1.7.1.js
jquery,node.js,gulp,browser-sync
The stack trace shows it's coming from fb.setDocument. Perhaps its facebook?
Gulp browser-sync where place folder?
I believe this is because Browser sync does not know, without additional configuration, what to do when you do not specify the explicit file you want to view. Normally, web servers default to viewing index.html when a directory is specified. To see if this is the case, go to http://localhost:3000/index.html,...
Browsersync doesn't set the right local url
Issue solved thanks to bower community member (github issue) I just need to delete any configuration option and add the snippet below before the closing tag: <script type='text/javascript' id="__bs_script__">//<![CDATA[ document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.2.1.0.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port)); //]]></script> ...
How to filter a gulp watch, which watches for CSS changes, in order to let browserSync stream only the actual modified files
You can invoke gulp.watch() with a glob and callback and use the event passed to the callback to know exactly which css file changed. gulp.watch(basePath+'/css/**/*.css', function(event) { gulp.src(event.path, {read: false}) .pipe(browserSync.stream()); }); After changing your watch to this, the css task in your example wouldn't be needed....
Excluding files for BrowserSync not working
I found a solution to my problem. It was actually crashing because of my path declaration. This is what I had before: var client = './src/client/'; var clientApp = client + 'app/'; var server = './src/server/'; var bower = './bower_components/'; var tmp = './.tmp/'; As you can see each path...
Gulp browser-sync proxy
According to the docs you should be using target rather than host. proxy: { target: "http://yourlocal.dev" } Or simply proxy: "local.dev" like @niba has in his answer...
BrowserSync showing message 'Disconnected from BrowserSync'
It looks like he just fixed whatever the bug was in 2.7.1. Updating Browser-sync fixed the issue for me :)
BrowserSync reload doesn't work (wordpress site)
node.js,wordpress,gulp,browser-sync
You're telling browser-sync to reload only your minified css version. You probably use non-minified version in your page and that causes the problem. So either reload just non-minified: .pipe(gulp.dest(css)) .pipe(reload({stream: true})) .pipe(rename({ suffix: '_min' })) .pipe(minifyCSS({keepSpecialComments:0})) .pipe(gulp.dest(css)); or both: .pipe(gulp.dest(css)) .pipe(reload({stream: true})) .pipe(rename({ suffix: '_min' })) .pipe(minifyCSS({keepSpecialComments:0})) .pipe(gulp.dest(css)) .pipe(reload({stream: true}));...
Browser-sync (under gulp) doesn't refresh browser
javascript,gulp,gulp-watch,gulp-livereload,browser-sync
I figured it out: browser-sync doesn't like implicit html tags, so this (although valid HTML5) will not work: <!doctype html> <title>implicit</title> but this will: <!doctype html> <html> <head> <title>full doc</title> </head> <body></body> </html> ...
How to make requests to a local Rails app from a local AngularJS app running on a different port?
ruby-on-rails,angularjs,localhost,cors,browser-sync
Ah, wonderful. Here are a few solutions: set up CORS, which shouldn't be too hard. All you have to do is add the headers to pages serving your static content (not the rails REST endpoints), The problem with this is you shouldn't really be doing it unless you have a...
Error handling with gulp-ruby-sass 1.0.0-alpha, gulp-notify, and browser-sync
error-handling,gulp,browser-sync,gulp-notify
The solution I found was to wrap notify.onError in an anonymous function and append this.emit('end'): .on('error', function(err) { notify.onError({ title: 'Error!', message: '<%= error.message %>', sound: 'Beep' })(err); this.emit('end'); }) ...
browser-sync does not refresh page after changes with Gulp
This is because you're calling browserSync.reload on the html watch and not on the scss watch. Try this: gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload); gulp.watch("app/*.html").on('change', browserSync.reload); ...
browser-sync is blocked by chrome csp
google-chrome,gulp,content-security-policy,browser-sync
Not sure if it's the best solution, but what i ended up doing is to install a chrome plugin that disables the csp: https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden If anyone has a better solution i'll be glad to hear it....
gulp + browser-sync - why gulp errors on removing directory from app?
The problem here was an outdated version of BrowserSync. Updating to the latest version will solve this issue....
Why browser-sync is not working with moodle theme
javascript,node.js,moodle,browser-sync
I do apology for posting the answer of my own question. Usually, in moodle we have listed out the css files in config.php. After created new css and listed this into config.php does not work. So I did attach the new css file into head tag with link tag, something...
Browser sync reloading but CSS not changing with LESS and Gulp
A good way to make browserSync work that way is to have a new listener on to the generated files. You compile LESS to CSS, gulp.task('less', function(){ return gulp.src(basepath + 'styles/emma.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(minifyCSS()) .pipe(sourcemaps.write('./')) .pipe(filesize()) .pipe(gulp.dest( paths.dest + '/css' )); }); and...
npm install error not installing BrowserSync package
node.js,cmd,npm,command-prompt,browser-sync
Have you tried like below? (http://www.browsersync.io/#install) npm install -g browser-sync -g means global. ...
Gulp-webapp running BrowserSync and PHP
php,sass,workflow,gulp,browser-sync
FWIW, I've got a quite simple and fair solution for that by placing the compiled .css file in the app/ root and moving /bower_dependencies folder inside the app/ folder. For Sass, I only needed to change the path in the placeholder to <!-- build:css styles/main.css --> and change the dest...
'grunt serve' starts fine but never loads
D'oh I was under the mistaken assumption that 'grunt serve' did the same thing (only better) as "mvn spring-boot:run". Not so. "mvn spring-boot:run" runs the backend web server and handles the REST endpoints. 'grunt serve' handles the front end angularJS side of things. Looking back at the documentation it is...
Gulp.js serve src files WITHOUT browserSync?
javascript,node.js,gulp,gulp-watch,browser-sync
Here's how to deprecate BrowserSync in favor of gulp-connect, a simple and stable Gulp plugin to run a webserver (with LiveReload). New gulp/server.js: 'use strict'; var gulp = require('gulp'); var util = require('util'); var connect = require('gulp-connect'); module.exports = function(options) { function createServerTask(name, pre, root) { gulp.task(name, pre, function() {...
How to do remote debugging with Browser-sync?
Though this was quite a tricky process in versions before Browser-sync 2.0, but with Browser-sync 2.0 you now have a brand new Web UI, which makes this process a whole lot easier. Firstly you need to update Browser-sync to it's latest version npm install -g [email protected] Then run any command...