browsersync / recipes Goto Github PK

i tried running the html.injection example and its throwing errors and not starting.

bash-5.0# yarn install
...
bash-5.0# yarn start
yarn run v1.21.1
$ node app.js
/app/browsersync/recipes/recipes/html.injection/node_modules/browser-sync/dist/plugins.js:151
        throw e;
        ^

Error: Could not locate the bindings file. Tried:
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node
    at bindings (/app/browsersync/recipes/recipes/html.injection/node_modules/bindings/bindings.js:126:9)
    at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/contextify.js:1:34)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/jsdom/lib/jsdom/browser/index.js:5:21)
    at Module._compile (internal/modules/cjs/loader.js:959:30) {
  tries: [
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node'
  ]
}
error Command failed with exit code 1.

Following wiki steps:

1. repo was cloned.
2. npm install ran correctly.
   On 'npm start' getting:
   "npm ERR! missing script: start"

There is no start script on package.json.
https://github.com/BrowserSync/recipes/blob/master/package.json#L13

Hello! Is there any example of BrowserSync and PostCSS middleware?

The example for webpack.react-transform-webpack-hmr works perfectly. However I'm getting 404 errors when I try to use this with the proxy option.

server.js

var webpack = require('webpack');
var config = require('./webpack.config');
var browserSync = require('browser-sync');
var compiler = webpack(config);

browserSync({
    proxy: {
        target: 'proxy-traget.dev',
        middleware: [
            require('webpack-dev-middleware')(compiler, {
                noInfo: true, publicPath: config.output.publicPath
            }),
            require("webpack-hot-middleware")(compiler)
        ]
    },
    files: [
        'css/style.css',
        '**/*.php'
    ]
});

webpack config:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'eval-source-map',

    entry: {
        truckFilter: [
            'webpack-hot-middleware/client?reload=true',
            './js/index.js'
        ]
    },

    output: {
        path: path.join(__dirname, 'js/build'),
        publicPath: "js/build",
        filename: "bundle.js"
    },

    // Require the webpack and react-hot-loader plugins
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            __DEV__: true
        }),
    ],

    resolve: {
        extensions: ['', '.js', '.jsx']
    },

    module: {
        // Load the react-hot-loader
        loaders: [ {
            test: /\.jsx?$/,
            loaders: ['babel'],
            include: path.join(__dirname, 'js')
        } ]
    },

};

Everything loads fine except localhost:3000/__webpack_hmr which 404s. Is the proxy setting sending that request to my proxy (php) server, or is it sending it to browser sync?

I would like to start browser-sync via Gulp using the configuration specified in my bs-config.json file - this does not seem to work for me even though my bs-config.json is in the same directory as my gulpfile.js. My thought was that the .init() function might be able to accept a path to the bs-config.json file, but I cannot find a reference regarding if this is possible in the the BrowserSync documentation...

Is this possible? or is there a better way to accomplish what I'm trying to do?

To demo, show that I can signup/login via facebook to create a JWT that allows me to actually create the Request.

I have a gzip server response that is send to clients by apache,
but not by browserSync proxy in development (its json encoded gzip content).

This is what i have now:

var browserSync = require('browser-sync');
browserSync({
    notify: false,
    logPrefix: packageJson.name,
    proxy: 'localhost', //Apache
    startPath: packageJson.appPath+'app',
    files: ["api/app/**/*.php"],
        middleware: require("connect-gzip")
  });

And before i have tryed the recipe for static content.
https://github.com/BrowserSync/recipes/tree/master/recipes/server.gzipped.assets

Can you confirm me the right way to handle that with browserSync?
Any experiences?

• browsers are reloaded on restart on port 3000 OK
• files are watched and sass compiled OK
• css file tree written to correct destination OK
• localhost:3001 shows browsers connected OK
• BUT completion of sass task does not result in browsers being reloaded
• reloadDelay up to 10 secs no effect
• tunnel (and other options) employed to no positive effect
• sandbox.home:8888 is a MAMP host on the local machine

Am I not telling browsersync something by any chance? Or have I told it something incorrect?

    var gulp        = require('gulp'),
        sass        = require('gulp-sass'),
        browserSync = require('browser-sync').create();
    var reload      = browserSync.reload;

    var sassSources     = ['sass/**/*.scss'];

    gulp.task('sass', function () {
      return gulp.src(sassSources)
        .pipe(sass({   
            includePaths: ['bower_components/compass-mixins/lib']}
        ))
        .pipe(gulp.dest('./css'))
        .pipe(reload({stream: true}))
    })


    gulp.task('watch-server', ['sass'], function() {
        browserSync.init( {
            // browsersync with a MAMP php server 
            // Note: BS still serves on port 3000
            proxy: "sandbox.home:8888",
            reloadOnRestart: true
        });
        gulp.watch(sassSources,     ['sass']);
    });

    gulp.task('default', ['watch-server']);

Doesn't even start. After: "npm run start" will quit with the error below.

> [email protected] start /Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer
> grunt

sh: grunt: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `grunt`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.../.npm/_logs/2017-11-24T13_04_08_593Z-debug.log

node version: v8.9.0
npm version: 5.5.1

0 info it worked if it ends with ok
1 verbose cli [ '/Users/.../.nvm/versions/node/v8.9.0/bin/node',
1 verbose cli '/Users/.../.nvm/versions/node/v8.9.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]start: [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]start: PATH: /Users/.../.nvm/versions/node/v8.9.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer/node_modules/.bin:/Users/.../node_modules/.bin:/Users/.../.nvm/versions/node/v8.9.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle [email protected]start: CWD: /Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer
10 silly lifecycle [email protected]start: Args: [ '-c', 'grunt' ]
11 info lifecycle [email protected]~start: Failed to exec start script
12 verbose stack Error: [email protected] start: grunt
12 verbose stack spawn ENOENT
12 verbose stack at ChildProcess. (/Users/.../.nvm/versions/node/v8.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack at emitTwo (events.js:126:13)
12 verbose stack at ChildProcess.emit (events.js:214:7)
12 verbose stack at maybeClose (internal/child_process.js:925:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
13 verbose pkgid [email protected]
14 verbose cwd /Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer
15 verbose Darwin 17.2.0
16 verbose argv "/Users/.../.nvm/versions/node/v8.9.0/bin/node" "/Users/.../.nvm/versions/node/v8.9.0/bin/npm" "run" "start"
17 verbose node v8.9.0
18 verbose npm v5.5.1
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error [email protected] start: grunt
23 error spawn ENOENT
24 error Failed at the [email protected] start script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

The html.injection recipe failed after I edited index.html (I added <h3>What's up?</h3> after the <p>).

$ node app.js
[BS] [HTML Injector] Running...
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.101:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.10.101:3001
 ---------------------------------------
[BS] Serving files from: app
[BS] Watching files...
/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220
        var valid = bs.io.of(bs.options.getIn(["socket", "namespace"])).sockets.map(function (client) {
                                                                                ^

TypeError: bs.io.of(...).sockets.map is not a function
    at requestNew (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220:81)
    at EventEmitter.fileChangedEvent (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:190:9)
    at emitOne (events.js:82:20)
    at EventEmitter.emit (events.js:169:7)
    at AnonymousObserver._onNext (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:19:17)
    at AnonymousObserver.Rx.AnonymousObserver.AnonymousObserver.next (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/rx/dist/rx.js:1828:12)
    at AnonymousObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/rx/dist/rx.js:1762:31)
    at Subject.Rx.Subject.addProperties.onNext (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/rx/dist/rx.js:5998:19)
    at FSWatcher.fn (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:37:21)
    at emitTwo (events.js:87:13)

Environment

• node 4.7.2
• macOS Sierra 10.12

After follow all the steps, I got:

I tried to put the absolute path on html files without success.

Hi all,

Recipe gulp.browserify currently supports only one input file (./app/js/app.js).
Any ideas how to extend the recipe to support multiple files or glob?

I tried the following code:

var glob = require('glob');

watchify.args.debug = true;
var b = browserify(watchify.args);

glob('./app/js/{app,worker}.js', {}, function(err, files) {
  files.forEach(function(file) {
    b.add(file);
  });
});

var bundler = watchify(b);

The problem is that only one file is generated (bundle.js).
So I changed source('bundle.js') to source().
Now it throws new Error('No path specified! Can not get relative.'

Hi,
I start using BrowserSync in actual version (2.26.7) and found that is some SyncOptions doesn't work:

• "scroll", "forms:ALL" on Google Chrome (75.0.3770.142)
• "scroll" on Firefox (68.0.1)
  (without errors at console)

Both "scroll", "forms:ALL" is fine on Edge (44.17763.1.0).
A I have updated version of Node.js (10.16.1), NPM (6.9.0), but problem appeared also on older version (I don't remember version number). It runs on Windows 10.

I've tested also simple clear HTML document with Lorem Ipsum text and simple form, without styles or any scripts.

Any solution for this?
Thank you in advance!

Martin

I am using webpack with the following config:

/**
 * Require Browsersync along with webpack and middleware for it
 */
var browserSync = require('browser-sync');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

/**
 * Require ./webpack.config.js and make a bundler from it
 */
var webpackConfig = require('./webpack.dev.config');
var bundler = webpack(webpackConfig);
console.log(webpackConfig.output.publicPath);
/**
 * Run Browsersync and use middleware for Hot Module Replacement
 */
browserSync({
    server: {
      baseDir: 'app',

      middleware: [
        webpackDevMiddleware(bundler, {
          // IMPORTANT: dev middleware can't access config, so we should
          // provide publicPath by ourselves
          publicPath: webpackConfig.output.publicPath,

          // pretty colored output
          stats: { colors: true }

          // for other settings see
          // http://webpack.github.io/docs/webpack-dev-middleware.html
        }),

        // bundler should be the same as above
        webpackHotMiddleware(bundler)
      ]
    },

    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: [
      'app/css/*.css',
      'app/*.html'
    ]
});

webpack.dev.config.js

const path = require('path');
const webpack = require('webpack');
const phaserModule = path.join(__dirname, '/node_modules/phaser/');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'),
  
  pixi = path.join(phaserModule, 'build/custom/pixi.js'),
  p2 = path.join(phaserModule, 'build/custom/p2.js');

module.exports = {
    //context: path.join(__dirname, 'app/src'),
    entry: {
      app: path.resolve(__dirname, 'app/src/app.js'),
      vendors: [
        'phaser',
        'webpack/hot/dev-server',
        'webpack-hot-middleware/client',
      ]
    },
    output: {
      publicPath: path.resolve(__dirname, 'app/build/'),
      path: path.resolve(__dirname, 'app/build'),
      filename: '[name].bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['env', 'es2015'],
                cacheDirectory: true
              }
            }
          ],
          test: [/\pixi.js/, /\p2.js/],
          use: [
            {
              loader: 'script-loader'
            }
          ]
        }
      ]
    },
    resolve: {
      alias: {
        'phaser': phaser,
          'pixi.js': pixi,
          'p2': p2,
      }
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendors' // Specify the common bundle's name.
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ],
    target: 'web'
}

When I do bundling with webpack cli its ok, but it doesnt load my bundles after bundling from node devserver.js

Just fyi, when I ran Crossbow, it generated the following path in the readme.md:

Note the ""

$ cd bs-recipes/recipes\webpack.typescript

Hello guys! First of all, browserSync is awesome, I've used a couple times in some projects that I've started with Yeoman's webapp. Congratulations in all your efforts in this tool, ok? :) thumbs up for you 👍!

Besides that, I'm used to mantain some websites that have been made in PHP, which doesn't have and never had a tool like BrowserSync with them. I'm actually making a project in PHP today and came here to see if there was any tips about configuring BrowserSync with a PHP project, but couldn't found much information about it, at least, the proxy option. Where I am now: I was able to configure my project with the proxy option and a virtual host, and until here, everything seems ok. So I was just wondering, maybe wouldn't it be interesting to put some information about this kind of project here in the recipes?

It'll be cool to hear about other programmers who may be using these technologies yet and already know about the wonderful world of BrowserSync, looking for to have the best of the two worlds.

If this discussion is not in the best spot, please, just let me know.

Regards, Gio.

I can't seem to get the server.gzipped.assets Recipe to pick up my .html.gz files. Gulp task looks like this:

gulp.task('serve', function () {
  browserSync({
    server: "./_site",
    files: ['./_site/public/css/*.css', './_site/public/js/*.js', './_site/*.html', './_site/**/*.html'],
    middleware: require("connect-gzip-static")("./_site")
  });
});

Any help is appreciated. Thanks in advance!

i tried running the html.injection example and its throwing errors and not starting.

bash-5.0# yarn install
...
bash-5.0# yarn start
yarn run v1.21.1
$ node app.js
/app/browsersync/recipes/recipes/html.injection/node_modules/browser-sync/dist/plugins.js:151
        throw e;
        ^

Error: Could not locate the bindings file. Tried:
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node
 → /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node
    at bindings (/app/browsersync/recipes/recipes/html.injection/node_modules/bindings/bindings.js:126:9)
    at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/contextify.js:1:34)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/jsdom/lib/jsdom/browser/index.js:5:21)
    at Module._compile (internal/modules/cjs/loader.js:959:30) {
  tries: [
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node',
    '/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node'
  ]
}
error Command failed with exit code 1.

The recipe still has a devDependency on bs-html-injector 2.x, which fails with an error when installing with Node 7. The issue was resolved in bs-html-injector 3.x, so the recipe should update.

> [email protected] install /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/contextify
> node-gyp rebuild
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
CXX(target) Release/obj.target/contextify/src/contextify.o

../src/contextify.cc:131:56: warning: 'NewInstance' is deprecated [-Wdeprecated-declarations]

Local wrapper = Nan::New(constructor)->NewInstance();

^

/Users/tony/.node-gyp/7.4.0/include/node/v8.h:3292:52: note: 'NewInstance' has been explicitly

marked deprecated here

V8_DEPRECATED("Use maybe version", Local NewInstance() const);

^

../src/contextify.cc:150:16: error: no member named 'SetAccessCheckCallbacks' in

'v8::ObjectTemplate'

otmpl->SetAccessCheckCallbacks(GlobalPropertyNamedAccessCheck,

~~~~~  ^

../src/contextify.cc:182:51: warning: 'GetRealNamedProperty' is deprecated

[-Wdeprecated-declarations]

Local rv = Nan::New(ctx->sandbox)->GetRealNamedProperty(property);

^

/Users/tony/.node-gyp/7.4.0/include/node/v8.h:2949:30: note: 'GetRealNamedProperty' has been

explicitly marked deprecated here

Local GetRealNamedProperty(Local key));

^

../src/contextify.cc:209:38: warning: 'GetRealNamedProperty' is deprecated

[-Wdeprecated-declarations]

if (!Nan::New(ctx->sandbox)->GetRealNamedProperty(property).IsEmpty() ||

^

/Users/tony/.node-gyp/7.4.0/include/node/v8.h:2949:30: note: 'GetRealNamedProperty' has been

explicitly marked deprecated here

Local GetRealNamedProperty(Local key));

^

../src/contextify.cc:210:42: warning: 'GetRealNamedProperty' is deprecated

[-Wdeprecated-declarations]

!Nan::New(ctx->proxyGlobal)->GetRealNamedProperty(property).IsEmpty()) {

^

/Users/tony/.node-gyp/7.4.0/include/node/v8.h:2949:30: note: 'GetRealNamedProperty' has been

explicitly marked deprecated here

Local GetRealNamedProperty(Local key));

^

4 warnings and 1 error generated.

make: *** [Release/obj.target/contextify/src/contextify.o] Error 1

gyp ERR! build error

gyp ERR! stack Error: make failed with exit code: 2

gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)

gyp ERR! stack     at emitTwo (events.js:106:13)

gyp ERR! stack     at ChildProcess.emit (events.js:191:7)

gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)

gyp ERR! System Darwin 16.3.0

gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"

gyp ERR! cwd /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/contextify

gyp ERR! node -v v7.4.0

gyp ERR! node-gyp -v v3.4.0

gyp ERR! not ok

[email protected] /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection

└── (empty)

npm WARN [email protected] No repository field.

npm ERR! Darwin 16.3.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"

npm ERR! node v7.4.0

npm ERR! npm  v4.0.5

npm ERR! code ELIFECYCLE
npm ERR! [email protected] install: node-gyp rebuild

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.

npm ERR! Make sure you have the latest version of node.js and npm installed.

npm ERR! If you do, this is most likely a problem with the contextify package,

npm ERR! not with npm itself.

npm ERR! Tell the author that this fails on your system:

npm ERR!     node-gyp rebuild

npm ERR! You can get information on how to open an issue for this project with:

npm ERR!     npm bugs contextify

npm ERR! Or if that isn't available, you can get their info via:

npm ERR!     npm owner ls contextify

npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:

npm ERR!     /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/npm-debug.log

Hello,

First of all, these were super helpful, so thanks for putting together! For my personal project however, I had to use some later versions of dependencies (react, babel, etc) which had some breaking changes.

Is there interest in updating the recipes to work with newer versions of deps? If so, I could make a pull request with bare minimum changes for bumping versions.

Hi Guys, after upgrading my Mac to Sierra BrowserSync still works but the stream functionality has stop working.

Ive simplify my set just to make sure it isn't that.

var browserSync = require("browser-sync").create(),
    reload = browserSync.reload;

gulp.task('watch', function () {
    browserSync.init({
        proxy: 'mywebsite.local'
    }); 

gulp.watch(['./sass/style.scss'], ['scss']);
);

gulp.task('scss', function () {

    return gulp.src('./sass/style.scss')
       // lots of piping and stuff
        .pipe(gulp.dest('./../public/css')).pipe(reload({stream: true}));
});

When changing CSS files, they're changed without reloading the page. Would it be possible to do the same for JavaScript files (and leave it to the user to figure out how to implement it in their code)?

See this
http://stackoverflow.com/questions/30213060/gulp-configuration-not-working

Api has changed this demo doesn't run.

When I change *.pug file first time it works fine. But when I change the file next time it doesn't reload the browser. But *.pug files compile.

I am currently moving away from build tools such as Grunt and Gulp and moving more towards using npm run directly. See http://substack.net/task_automation_with_npm_run & http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

My projects' development process often include the following:

• run BS server and reload on changed ./dist/*.html, ./dist/assets/css/*.css, ./dist/assets/js/*.js files
• run lib-/node- Sass and watch ./src/assets/*.scss
• run autoprefixer over my compiled css
• run browserify (with e.g. watchify) to bundle my app js
• uglify JS
• optionally watch and optimize changed image resources (imagemin)
• .. copying files between ./src/ and ./dist/

I have gotten it 'somewhat' working but I am pretty sure there are better ways to tie all this together with BS at the core..

Any ideas? If I figure this out I'd like to add it as a 'npm run recipe'.

Example package.json scripts section:

  "scripts": {
    "server": "browser-sync start --files \"./dist/*.html,./dist/assets/js/*.js,./dist/assets/css/*.css\" --server dist",
    "start": "npm run server",
    "watch:css": "node-sass -w -r ./src/assets/css -o ./dist/assets/css --output-style compressed",
    "watch:js": "sync-files -w ./src/assets/js ./dist/assets/js",
    "watch:img": "sync-files -w ./src/assets/img ./dist/assets/img",
    "watch:html": "sync-files -w -d 1 ./src ./dist",
    "watch": "parallelshell \"npm run watch:css\" \"npm run watch:js\" \"npm run watch:html\" \"npm run watch:img\"",
    "dev": "parallelshell \"npm run server\" \"npm run watch\""
  },

Note The above simply copies HTML, JS and IMG files from ./src/ to ./dist/ and does not yet deal with browserify, autoprefixr etc...

Version:

• Browsersync [ v2.24.5 ]
• Node [ v6.12.2 ]
• Npm [ 3.10.10 ]
• [ 64bit] windows
• [ Local version 3.9.1 ] Gulp

Problem - When I run gulp, this message appears:

[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

gulpfile.js

`gulp.task('serve', function() {
  browserSync.init({
	open: 'external',
	proxy: 'site1.net', 
	watchTask: true,
	port: 8080,
	browser: "chrome"
  });
});`

I have to manually input the URLs into the browser & it works with my current connections, but the message is still there. So how do I solve this issue? Any help would be highly appreciated, thanks

Screenshots:

issue1
issue2
issue3

History:

I had no issues with my Browsersync before & my gulp runs automatically until now. I think I had Windows 10 64bit update today and this issue came out. All seems normal, except the Browsersync Issue.

I tried these links, but nothing seemed to work:
tried1
tried2

https://www.npmjs.com/package/gulp-rev-all

The server Recipe uses the files option instead of the the watch options. Perhaps there is some reason for this, but I'm guessing that the Recipes do not reflect the current recommendations. For the sake of clarity and consistency It would be great if the Recipes could be updated with the best practices.

Thanks!

Do anybody have worked in BrowserSync?? I would like to know whether BrowserSync supports for Multiple mobile devices ??

Thanks in advance
Regards,
Kirthi

Michaels-MBP-4:gulp.jade MichaelLeung$ npm start

[email protected] start /Users/MichaelLeung/bs-recipes/recipes/gulp.jade
gulp

/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22
throw new Error('libsass bindings not found. Try reinstalling node-sass?');
^

Error: libsass bindings not found. Try reinstalling node-sass?
at getBinding (/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22:11)
at Object. (/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/index.js:3:17)
at Module._compile (module.js:435:26)

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.2.4
npm ERR! npm v3.5.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the gulp.jade package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs gulp.jade
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls gulp.jade
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/MichaelLeung/bs-recipes/recipes/gulp.jade/npm-debug.log

I followed the instructions like the ones here and got the following message above after running npm start.

I've gotten BrowserSync working to the point where it tells me that it has injected CSS, but not to the point where it actually does. I tried the HTML/CSS injection example to get it working, but it seems like it and all the recipes involve script task runners, Sass, or both.

Is there any way to use BrowserSync just to watch a stylesheet with CLI? Or does using BrowserSync effectively also require a pretty thorough understanding of javascript task runners, CSS preprocessors, or both?

bs-recipes (1.3.4) has a dependency to monkey-hot-loader. https://www.npmjs.com/package/monkey-hot-loader

monkey-hot-loader package and code is unlicensed code, which by default is copyrighted to the original author. You may not use these dependencies without first obtaining a license.

I have tried to run the html.injector example for a while now.. in the meantime, both npm and node has upgraded to new versions (in case that was the problem the first time), but even now, i get this long error that i got last time.

[BS] Serving files from: app
[BS] Watching files...
/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220
        var valid = bs.io.of(bs.options.getIn(["socket", "namespace"])).sockets.map(function (client) {
                                                                                ^

TypeError: bs.io.of(...).sockets.map is not a function
    at requestNew (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220:81)
    at EventEmitter.fileChangedEvent (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:190:9)
    at emitOne (events.js:101:20)
    at EventEmitter.emit (events.js:188:7)
    at AnonymousObserver._onNext (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:19:17)
    at AnonymousObserver.Rx.AnonymousObserver.AnonymousObserver.next (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/rx/dist/rx.all.js:1828:12)
    at AnonymousObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/rx/dist/rx.all.js:1762:31)
    at Subject.onNext (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/rx/dist/rx.all.js:11944:19)
    at FSWatcher.fn (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:37:21)
    at emitTwo (events.js:106:13)

npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.5.0
npm ERR! npm  v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node app.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node app.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bs-recipes-html-injection package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node app.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs bs-recipes-html-injection
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls bs-recipes-html-injection
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/sivilll/code/pt/bs-recipes/recipes/html.injection/npm-debug.log

Anyone know what this means? The terminal runs correctly when i enter "npm start" but on the very first change, this error occurs.

Hello,

I'm testing webpack.react-transform-hmr and I noticed that it doesn't generate bundle.js in any directory. How can I achieve this?

From this https://github.com/BrowserSync/recipes/tree/master/recipes/server.includes instruction I successfully setup server includes but when I change template auto reload working but not update the template content.

I tried grunt.html.injection example, but don't inject the Browsers when I modify the html / css files, the sync work properly only on Clicks and Scroll

In my JS:

document.write('hello world')

Now when I edit the HTML to inject it, hello world disappears.