browsersync / ui Goto Github PK

1. cb build-all doesn't build the .hbs files
2. cb watch throw error saying "crossbow.stream is not a function"
3. gulp crossbow doesn't work, cause there's no crossbow task in gulpfile.js

I'm building my site on Laravel with a MAMP PRO server running. Everything works correctly however the CSS style injection does not work.

It doesn't throw any errors, it just doesn't inject the styles when I hit save.

Here is my Gulp.js file:

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Gulp
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var gulp = require('gulp');



// Plugins
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Utilities
var gutil        = require('gulp-util'); // Gulp Utilities
var rename       = require('gulp-rename'); // Rename Files
var notify       = require('gulp-notify'); // OSX Notifications
var filesize     = require('gulp-filesize'); // Logs filesizes in human readable Strings

// Live Reloading
var browserSync  = require('browser-sync'); // Live Reloading
var reload       = browserSync.reload;

// Sass
var sass         = require('gulp-sass'); // Sass Compiler
var minifycss    = require('gulp-minify-css'); // CSS Minifier
var autoprefixer = require('gulp-autoprefixer'); // CSS autoprefixing
var pixrem       = require('gulp-pixrem'); // Pixel fallback for REMs

// Javascript
var jshint       = require("gulp-jshint"); // AKA error detector
var stylish      = require('jshint-stylish'); // Stylish reporter for JSHint
var uglify       = require("gulp-uglify"); // JS Minifier
var concat       = require("gulp-concat"); // Concatenator

// TODO: Install Image Optimizer



// Variables
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Directories
var SRC     = 'resources/assets';
var BUILD   = 'public';
var BOWER   = 'vendor/bower_components';



// Tasks
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Browser Sync
gulp.task('browser-sync', function() {
  browserSync({
    proxy: "http://www.rapidwristbands.local/"
  });
});


// Sass
gulp.task('sass', function() {
  return gulp.src(SRC + '/sass/*.scss')
  .pipe(
    sass({
      outputStyle: 'expanded',
      debugInfo: true,
      lineNumbers: true,
      errLogToConsole: false,
      onError: function(err) {
        gutil.beep();
        notify().write('Gulp Sass Error on line ' + err.line);
        gutil.log(
          'Error ' + gutil.colors.red.inverse(err.message +
            '\nin ' + err.file + ' on line ' + err.line));
      }
    })
    )
  .pipe(gulp.dest(BUILD + '/css')) // plain css output before extra builds
  .pipe(minifycss()) // minifycss has to happen before prefix and pixrem
  .pipe(autoprefixer())
  .pipe(pixrem('16px', { replace: false }))
  .pipe(rename({suffix: '.min'}))
  .pipe(filesize())
  .pipe(gulp.dest(BUILD + '/css'))
  .pipe(reload({stream: true}));
});


// Javascript

function swallowError (error) {
  this.emit('end');
}

gulp.task("js", function() {
  return gulp.src([
    SRC   + '/js/*.js'
    ])
  .pipe(jshint())
  .pipe(jshint.reporter(stylish))
  .pipe(uglify().on('error', swallowError ))
  .pipe(concat('app.js'))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(BUILD + '/js'))
  .pipe(filesize());
});

gulp.task('js-vendors', function() {
  return gulp.src([
    BOWER + '/jquery/dist/jquery.min.js',
    BOWER + '/foundation/js/foundation.min.js',
    BOWER + '/magnific-popup/dist/jquery.magnific-popup.min.js',
    BOWER + '/jquery.lazyload/jquery.lazyload.js/',
    BOWER + '/ms-Dropdown/js/msdropdown/jquery.dd.min.js',
    // BOWER + '/responsive-tables/responsive-tables.js',
    BOWER + '/spectrum/spectrum.js',
    ])
  .pipe(uglify().on('error', gutil.log))
  .pipe(concat('vendors.js'))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(BUILD + 'js'))
  .pipe(filesize());
})

// Send Modernizr to build folder
gulp.task("modernizr", function () {
  return gulp.src([ BOWER + '/modernizr/modernizr.js'])
  .pipe(uglify())
  .pipe(rename({suffix:'.min'}))
  .pipe(filesize())
  .pipe(gulp.dest(BUILD + 'js'));
});


// Watch
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gulp.task('watch', function() {
  gulp.watch(SRC + '/sass/**/*.scss', ['sass']);
  gulp.watch(SRC + '/js/*.js', ['js', browserSync.reload]);
  gulp.watch('resources/views/**/*.php').on("change", browserSync.reload);
});


// Default
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gulp.task('default', [
  'browser-sync',
  'sass',
  'js',
  'watch'
  ]);

Because of #8 - we should either remove the weinre option when it wont work, or display a message

1. open the Browsersync-ui page
2. click history tab
3. click sync all Button

The program of BrowserSync is working
but Then

1. click remote debug
2. turn on Remote Debugger (weinre)
3. click history tab
4. click sync all Button, The Browsersync ui is crash !!!!

The Browser is Chrome Version 51.0.2704.103 (64-bit)

I don't know why ?

There is no history plugin in plugins folder however the UI.js requires one. Hence the error "Cannot find module './plugins/history/history.plugin'" at line 13 of UI.js

I can see the plugin here in your github repo but it is not in my installed package. Version is 0.6.1

To go along with the latency throttler - if we can figure out how to throttle the responses for both server + proxy, then we can offer a chrome dev-tools style list of pre-defined speeds such as

https://www.bithound.io/github/BrowserSync/UI/master/dependencies/npm#filter-insecure-dep

I was trying to think of a way to get browser-sync to wake up all my devices and go straight to a URL. That was way more work then I'm ready for so I dialed it back.

I was thinking of a way to avoid typing in the address. I'm wondering if there's a way we can get a QR code into UI (in the external section of overview) or maybe even a command line option that'll output one right to the console (something like: https://www.npmjs.com/package/qrcode-terminal) .

Anyway. I'd definitely love to give it a shot if you think it's something you'd be willing to go with.

In my case, my app iris-webclient depends on both angular and browser-sync resulting into this error when I try to run browser-sync:

fs.js:502
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT, no such file or directory '/home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/browser-sync-ui/lib/../angular/angular.min.js'
    at Error (native)
    at Object.fs.openSync (fs.js:502:18)
    at Object.fs.readFileSync (fs.js:354:15)
    at fileContent (/home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/browser-sync-ui/lib/server.js:129:15)
    at getClientJs (/home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/browser-sync-ui/lib/server.js:202:9)
    at startServer (/home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/browser-sync-ui/lib/server.js:66:23)
    at Object.module.exports.startServer [as fn] (/home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/browser-sync-ui/lib/async.js:81:41)
    at /home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/browser-sync-ui/lib/UI.js:126:14
    at iterate (/home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/async-each-series/index.js:8:5)
    at /home/spacepluk/workspace/iris-webclient/node_modules/browser-sync/node_modules/async-each-series/index.js:16:16

https://github.com/BrowserSync/UI/blob/master/lib/server.js#L202

Hello,

I can't use weinre.
My target disappear after 30 seconds.

Tested in localhost and external IPs.

For example, say I want to add an inline plugin to BrowserSync for some quick and dirty hacking - using a URL logger as an example, it would be cool if it was possible to create a toggle for each plugin, regardless of whether the plugin has UI code/markup.

var PLUGIN_NAME = "Asset Logger";
var logger = {
    // Name of Plugin
    "plugin:name": PLUGIN_NAME,
    // Interface for BrowserSync
    plugin: function (opts, bs) {

        // Middleware are given a name to be easily accessed/removed
        var mwname = "asset-logger";

        // Add the middleware at run time.
        addMiddleware();

        // Listen to plugins:configure event and add/remove middleware accordingly
        bs.events.on("plugins:configure", function (data) {

            // Don't act on any other plugins
            if (data.name !== PLUGIN_NAME) {
                return;
            }

            // If toggle switch = on
            if (data.active) {
                if (!bs.app.stack.some(function (item) {
                    return item.id === mwname;
                })) {
                    addMiddleware();
                }
            } else {
                // If toggle switch = off
                bs.removeMiddleware(mwname);
            }
        });
        function addMiddleware () {
            bs.addMiddleware("*", function (req, res, next) {
                // our pseudo middleware
                console.log(req.url);
                next();
            }, {override: true, id: mwname});
        }
    }
};

bs = require("browser-sync");
bs.init({
    server: "./app",
    plugins: [logger]
});

Issue details

With BrowserSync in HTTPS mode, starting a Network Throttle server causes the process to crash with the following error:

<OMITTED>\node_modules\browser-sync\node_modules\browser-sync-ui\lib\plugins\network-throttle\network-throttle.js:90
var certs = require("browser-sync/lib/server/utils").getKeyAndCert(ui.bs.options);
                                                     ^

TypeError: require(...).getKeyAndCert is not a function
    at createThrottle (<OMITTED>\node_modules\browser-sync\node_modules\browser-sync-ui\lib\plugins\network-throttle\network-throttle.js:90:74)
    at <OMITTED>\node_modules\browser-sync\node_modules\browser-sync-ui\lib\plugins\network-throttle\network-throttle.js:109:21
    at <OMITTED>\node_modules\browser-sync\node_modules\portscanner\lib\portscanner.js:222:7
    at <OMITTED>\node_modules\browser-sync\node_modules\portscanner\node_modules\async\lib\async.js:789:30
    at <OMITTED>\node_modules\browser-sync\node_modules\portscanner\node_modules\async\lib\async.js:167:37
    at <OMITTED>\node_modules\browser-sync\node_modules\portscanner\lib\portscanner.js:208:9
    at Socket.<anonymous> (<OMMITTED>\node_modules\browser-sync\node_modules\portscanner\lib\portscanner.js:132:5)
    at emitOne (events.js:77:13)
    at Socket.emit (events.js:169:7)
    at TCP._onclose (net.js:486:12)

I checked the respective utils file in the BrowserSync main module and it does indeed seem like the method getKeyAndCert() doesn't exist.

Steps to reproduce/test case

1. Start BrowserSync with https: true option
2. Open UI and go to Network Throttle tab
3. Click Create Server

browserSync({
    server: {
        baseDir: targetDir,
    },
    ghostMode: false,
    notify: false,
    https: true,
});

Versions

• Browsersync [ 2.18.5 ]
• Node [ 4.4.7 ]
• Npm [ 2.15.8 ]

Weinre not loaded on linux machine with chrome, however it opens on other machines in local network served by my machine.

Request URL:http://localhost:8080/client/
Request Method:GET
Status Code:503 Service Unavailable

Hi, i can't find in the docs how to enable Remote Debug options from start using grunt.

Every time BS restarts, i have to check the Remote Debug options. This also makes me to have UI enabled.

thanks,

For debugging layout things/breakpoints - it could be cool to overline a photoshop style ruler with user-defined spacings

I'm using netatalk for network sharing with mac osx and this does add a .AppleDouble folder to each folder inside the shared path. The browser-sync-ui module does try to load this folder as file here

I've solved this by adding a line to exclude all "files" which start with a dot, but I'm not sure if this is really the correct way to fix this issue.

function createInlineTemplates (hooks) {
    return hooks.reduce(function (combined, item) {
        return combined + item.reduce(function (all, filepath) {
            if(path.basename(filepath).substr(0, 1) == '.') return null;
            return all + angularWrap(
                path.basename(filepath),
                fs.readFileSync(filepath));
        }, "");
    }, "");
}

So that there is one master browser that sends events and slave conenctions that follows the master without sending events.

It can be done by separating the ports. :3000 is a master and :3002 is sychronized, but can't affect the master.

Love Browser-sync for the record! Long story short our website is a GMaps based listing service and I can get browser-sync to work on every other part of the site (homepage, hamburger menu, listing pages, registration, etc) but when I click on a listing from the google maps portion it breaks the browser-sync connection. Any ideas into what I can look into?

Thanks!

Hello guys,

I have setup multiple BrowserSync servers and I would like to be able to control each ones settings from their own UI, however when I open the UI url, it does work for the first server I open, but when I try to open the other ones it gives me the UI for the first one I opened and only controls that one.

Loving the new UI work!

We have a device lab and it'd be awesome to be able to change where we're pointing all the devices at at runtime.

Is this something that can just be added via the UI?

I'd love to contribute this myself if so! :)

Getting shasum check failed for browser-sync-ui 0.5.8 and then npm removes browser-sync completely during install. Am I doing something wrong?

Using browser-sync 2.7.1 - strangely, installing browser-sync on its own as a single dev dependency works fine.

Also, the link to this repo on npmjs is outdated (https://github.com/shakyshane/browser-sync-ui).

Due to security risks we're not allowed to use browser-sync anymore.

Specifically, certain versions of angular are retired by RetireJs https://retirejs.github.io/retire.js/#vulnsjs

Please update to a version past 1.6.9

Hi,
As a tester I would like to test a given website hosted on an external server using browser sync on multiple browsers. When I try to access the URL using the command browser-sync start --proxy "any external URL" the link is opened in a web browser but it does appear to be synced with browser sync. Is it actually possible to test an external website on multiple browsers using browser sync. And if so how ?

Thanks,
Swaroop

v 2.18.13

With the snippet mode, the UI page still tries to connect to browser-sync via http instead of https.
http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=L_VVT8U
The UI page is also running on http://localhost:3001 instead of https

//config

		browserSync: {

			options: {
				https: true,
				socket: {
					domain: 'localhost:3000'
				}
			}
               }

Using Chrome dev tools to edit files, once Command S is pressed to save the change it is then not possible to Command Z and undo the change.

This works fine when editing the files whilst not using the BrowserSync proxy:-
http://localhost/tubby/

But not when viewing the sites using the BrowserSync proxy:-
http://localhost:3000/tubby/

Any one else had this issue?

The files lib/plugins/remote-debug/overlay-grid/css/grid-overlay-horizontal.css and lib/plugins/remote-debug/overlay-grid/css/grid-overlay-vertical.css contain invalid CSS. It seems like they're meant to be parsed at some point, but at the moment they are distributed out to NPM unparsed.

How to reproduce

$ npm install browser-sync
$ cat node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/css/grid-overlay-*.css

http://cl.ly/image/0m1H1U0s3p3u/Screen%20Shot%202015-01-31%20at%2019.54.17.png

mac os
node -v
v6.9.1
browser-sync --version
2.18.5
My startup code
browser-sync start --server --files "**"
Access URLs:

Local: http://localhost:3000
External: http://192.168.1.118:3000

UI: http://localhost:3001
UI External: http://192.168.1.118:3001

Hi, noticed that the browser-sync-ui package totals 27mb on my system, which ramps up when you use browser-sync in every single project, and across many machines.

Would you consider ways to reduce the install size? For instance, the source-sans fonts could be loaded from a CDN with a fallback.

Anyway, just a note… thanks so much for BrowserSync!

I have an issue with BrowserSync set up via Gulp in both Laravel Valet and VVV Vagrant workflows using WordPress. (Valet and VVV are not run at the same time - I just have noticed the issue in both)

I find that that new sites created work fine with BrowserSync and all watched files when changed update and the browser reloads - however randomly after a while the browser reload stops even though the file event change is recognised in the output. Other Gulp tasks carry on working normally just the BrowserSync stops.

I have macOS Sierra 10.12.6
Gulp 3.9.1
Node 8.11.3
BrowserSync 2.24.6

Once the issues occurs it fails in all browsers and on restart - it also fails if executed as a command in a terminal session - ie

browser-sync start --proxy "mysite.test" --files "*.css"

My gulp file task...

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserSync = require('browser-sync').create();
var sitename = 'mysite'; 

// Fire up browserSync
gulp.task('sync', function() {
    browserSync.init({
        proxy: sitename +'.test',
	xip: true,
	    
	files: ["./*.css","*.php","css/*css","lib/*.php", "includes/*.php", "includes-child/*.php", "includes-child/woocommerce/*.php", "includes-child/woocommerce/*.css"],
	
    });

});

My Task output

> Executing task: node_modules/.bin/gulp sync <

[18:26:01] Using gulpfile ~/Sites/mysite/wp-content/themes/mytheme/gulpfile.js
[18:26:01] Starting 'sync'...
[18:26:01] Finished 'sync' after 69 ms
[Browsersync] Proxying: http://mysite.test
[Browsersync] Access URLs:
 --------------------------------------------
       Local: http://127.0.0.1.xip.io:3000
    External: http://192.168.0.22.xip.io:3000
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.22.xip.io:3001
 --------------------------------------------
[Browsersync] Watching files...
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css

Any thoughts?

Whilst debugging a recent issue I realised it would be an immense help to have request logging in the UI - something in a similar vein to chrome://net-internals but for requests proxied or served by browsersync.

Currently, you can achieve some request logging with the following:

const browserSyncPort = portfinderSync(3001);
const bs = browserSync.create();
bs.init({
    logLevel: 'debug',
    logConnections: true,
    logFileChanges: true,
    port: browserSyncPort,
    ui: {
        port: portfinderSync(browserSyncPort + 1),
    },
    proxy: {
        target: 'somehost.name',
        middleware: [require('connect-logger')(), webpackDevMiddleware, webpackHotMiddleware],
    },
}, done);

Which is great, but it does get a little hard to follow when you've also got the build process spitting out logs into the same STDOUT.

Use case:

You have a an API endpoint that you're hitting and getting json back from. How cool would it be if the UI had a code-editor built in where you can modify (in real time) the json that a specific path points to.

1. Should be togglable on/off
2. Should be able to select an already-visited path from a list or auto complete thingy
3. Code highlighted editor with json validation as you type

File-watching with Browser-Sync is showing "file-changed" on a file which doesn't have any changes. It happens when I open it in Sublime Text and Atom editor. Any file(that is being watched) opened with either of the above two editors triggers an infinite message of "file-changed" on the console.

Please shed some light on this.

Edit: This is not the case when I use Notepad++, it works fine for notepad++

It would be great if there would be a textfield in the UI to inject some JavaScript bookmarklet.

Some Bookmarklets:

• DebugCSS
• PerfMap
• PerformanceBookmarklet

@marcobiedermann

No compatible version found: [email protected]
Valid install targets:

0.6.0, 0.5.19, 0.5.18, 0.5.17, 0.5.16, 0.5.15, 0.5.14, 0.5.13, 0.5.12, 0.5.11, 0.5.10, 0.5.9, 0.5.8, 0.5.7, 0.5.6, 0.5.5, 0.5.4, 0.5.3, 0.5.2, 0.5.1, 0.5.0, 0.4.11, 0.4.10, 0.4.9, 0.4.8, 0.4.7, 0.4.6, 0.4.5, 0.4.4, 0.4.3, 0.4.2, 0.4.1, 0.4.0, 0.3.1, 0.3.0, 0.2.5, 0.2.4, 0.2.3, 0.2.2, 0.2.1, 0.2.0, 0.1.0, 0.0.14, 0.0.13, 0.0.12, 0.0.11, 0.0.10, 0.0.9, 0.0.8, 0.0.7, 0.0.6, 0.0.5

When I try and Sync All to a historical URL in the UI, none of the instances of the website update or change? Is this a known bug or anyway to resolve this?

I am running into the case of running Weinre behind a router, so Weinre must use a boundHost that is different than the public IP.
Weinre auto detect the boundIp from the external interface hostname,
https://github.com/BrowserSync/UI/blob/master/lib/plugins/remote-debug/weinre.js#L177
so far so good, but when I specify a host in options, Weinre is use that value, and that results in boundHost being set to the undesired value.

change the ip address into QR image for easy test.

I'm using snippet mode, and I have two browsers connected. When I hit RELOAD ALL (for example), it works correctly, but there is nothing listed under "Current Connections". Am I missing something?

Browsersync [ 2.12.5 ]
Node [ 5.11.0 ]
Npm [ 3.8.6 ]

Win10

There is no Remote Debugger(weinre) button in my pag. need i install weinre?

The included pesticide is outdated and has syntax errors. The syntax errors have been fixed upstream.

basically, exactly the same issue as BrowserSync/browser-sync#437