yarn browser-sync 2.17.0
v2.17.0

latest releases: 3.0.2, 3.0.1, 3.0.0...
7 years ago
  • FIXED https option is no longer clobbered when running from the CLI 27a08c2

  • ADDED - better support for per-route static file serving 97dd907
    For example, let's say you have a deployed Wordpress website at http://example.com where the assets live inside wp-content/themes/awesome/. Now lets imagine you need to make small CSS tweaks in style.css, but you don't want the hassle of running PHP + MySQL on your local machine... With Browsersync you can now easily map remote paths to local ones. So if you have the file wp-content/themes/awesome/style.css on your machine, you could run the following and have your changes update the live website.

    /**
    * This example will proxy an EXISTING website
    * whilst serving assets from your local directory.
    * This is crazy-powerful, especially when you consider
    * it works across all devices.
    */
    const bs = require('browser-sync').create();
    
    bs.init({
        proxy: 'http://example.com',
        files: ['htdocs/wp-content/themes/awesome'], // watch files
        serveStatic: [
            {
                route: '/wp-content/themes/awesome',     // remote path
                dir: 'htdocs/wp-content/themes/awesome'  // local path
            }
        ]
    });

    This kind of magic was always possible with Browsersync, but it required more complicated setup that we're happy to see the back of. The best bit is that the proxy will kick in if a file is not found locally. So in our Wordpress example, you could have nothing but a CSS file and everything would still work.

    A knock-on effect of this feature is that now you can map multiple remote paths to multiple local directories... I know, it's magical and amazing.

    // map 2 remote paths to 1 local directory
    serveStatic: [
        {
            route: ['/wp-content/themes/theme1', '/wp-content/themes/theme2'],
            dir: './my-local'  // local path
        }
    ]
    // map 1 remote path to 2 local directories
    serveStatic: [
        {
            route: '/wp-content/themes/theme1',
            dir: ['./my-local', './tmp']  // local path
        }
    ]

  • ADDED support for opening browsers with flags** #1179

    For example, if you wanted to open Chrome with certain flags when Browsersync starts, you can do

    const bs = require('browser-sync').create();
    
    bs.init({
    server: './app',
    browser: [
        {
            app: [
                'chromium-browser',
                '--app=http://localhost:8080',
                '--proxy-server=localhost:8080',
                '--user-data-dir=.tmp/chomium'
            ]
        }
    ]
    });

    This can also be combined with the string-only versions too - so to open chrome with flags, but safari + firefox as normal:

    const bs = require('browser-sync').create();
    
    bs.init({
    server: './app',
    browser: [
        {
            app: [
                'chromium-browser',
                '--app=http://localhost:8080',
                '--proxy-server=localhost:8080',
                '--user-data-dir=.tmp/chomium'
            ]
        },
        'safari',
        'firefox'
    ]
    });

Don't miss a new browser-sync release

NewReleases is sending notifications on new releases.