You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

browser-sync

Package Overview
Dependencies
Maintainers
1
Versions
301
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

browser-sync - npm Package Compare versions

Comparing version

0.2.1
to
0.3.0

lib/cli-strings.js
lib/dev-proxy.js
test/fixtures/css/bootstrap-less.css
test/fixtures/css/bootstrap-scss.css
test/fixtures/css/bootstrap.css
test/fixtures/less.html
test/fixtures/less/bootstrap.less
test/fixtures/sass.html
test/fixtures/scss/bootstrap.scss
test/fixtures/si-config-proxy.js
test/fixtures/stylus/bootstrap.styl
test/new-server/cli-messagesSpec.js
test/new-server/cli-proxySpec.js

45

Gruntfile.js

@@ -7,2 +7,9 @@ 'use strict';

grunt.initConfig({
dirs: {
assets: "test/fixtures",
css: "<%= dirs.assets %>/css",
less: "<%= dirs.assets %>/less",
scss: "<%= dirs.assets %>/scss",
stylus: "<%= dirs.assets %>/stylus"
},
nodeunit: {

@@ -36,2 +43,10 @@ files: ['test/**/*_test.js']

tasks: ['jasmine_node']
},
sass: {
files: ['test/fixtures/scss/bootstrap.scss'],
tasks: ['sass']
},
less: {
files: ['test/fixtures/less/bootstrap.less'],
tasks: ['less']
}

@@ -60,2 +75,29 @@ },

}
},
/**
*
*
* Fixture stuff
*
*/
less: {
development: {
files: {
"<%= dirs.css %>/bootstrap-less.css": "<%= dirs.less %>/bootstrap.less"
}
}
},
stylus: {
development: {
files: {
"<%= dirs.css %>/bootstrap-stylus.css": "<%= dirs.stylus %>/bootstrap.styl"
}
}
},
sass: {
development: {
files: {
"<%= dirs.css %>/bootstrap-scss.css": "<%= dirs.scss %>/bootstrap.scss"
}
}
}

@@ -69,2 +111,5 @@ });

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-jasmine-node');

@@ -71,0 +116,0 @@ grunt.loadNpmTasks('grunt-karma');

73

lib/browser-sync.js

@@ -12,3 +12,5 @@ var portScanner = require('portscanner');

var devIp = require('dev-ip');
var createProxy = require('./dev-proxy');
var parser = new UAParser();

@@ -38,3 +40,3 @@ var options;

this.getPorts(2, function (ports) {
this.getPorts(3, function (ports) {

@@ -65,6 +67,9 @@ // setup Socket.io

var lastFound = 2999;
// get a port (async)
var getPort = function (start) {
portScanner.findAPortNotInUse(start + 1, 4000, 'localhost', function (error, port) {
var getPort = function () {
portScanner.findAPortNotInUse(lastFound + 1, 4000, 'localhost', function (error, port) {
ports.push(port);
lastFound = port;
runAgain();

@@ -77,3 +82,3 @@ });

if (ports.length < limit) {
getPort(ports[0]);
getPort();
} else {

@@ -86,3 +91,3 @@ return callback(ports);

// Get the first port
getPort(2999);
getPort();

@@ -317,2 +322,4 @@ },

var proxy = options.proxy || options.website || null;
var modifySnippet = function (req, res) {

@@ -324,4 +331,10 @@ res.setHeader("Content-Type", "text/javascript");

var app;
// Server the JS file manually for anything that doesn't use a server.
if (!options.server) {
app = connect().use(messages.clientScript, modifySnippet);
}
if (proxy) {
createProxy(host, ports, options);
} else {

@@ -345,5 +358,13 @@

if (options.server) {
msg = messages.initServer(host, ports[1], this.getBaseDir(options.server.baseDir || "./"), options);
msg = messages.initServer(host, ports[1], this.getBaseDir(options.server.baseDir || "./"));
this.openBrowser(host, ports[1], options);
} else {
}
if (proxy) {
msg = messages.initProxy(host, ports[2]);
this.openBrowser(host, ports[2], options);
}
if (!options.server && !proxy) {
msg = messages.init(host, ports[0], ports[1]);

@@ -369,3 +390,3 @@ }

/**
* Proxy for chokidar watching files
* Proxy for gaze file watching
* @param {Array|string} files

@@ -378,3 +399,3 @@ * @param {object} io

var _this = this, log = this.log;
var _this = this, log = this.log, lastInjected = { time: new Date().getTime() };

@@ -393,5 +414,35 @@ gaze(files, function(err, watcher) {

this.on('changed', function(filepath) {
callback(filepath, io, options, _this);
var stats = fs.statSync(filepath);
if (stats.size === 0) {
var count = 0;
var writeCheck = setInterval(function () {
if (count > 4000) {
clearInterval(writeCheck);
return;
}
count += 200;
if (fs.statSync(filepath).size > 0) {
lastInjected.time = new Date().getTime();
lastInjected.file = filepath;
callback(filepath, io, options, _this);
clearInterval(writeCheck);
return;
}
}, 200);
} else {
if (new Date().getTime() > lastInjected.time + 2000) {
callback(filepath, io, options, _this);
}
lastInjected.time = new Date().getTime();
lastInjected.file = filepath;
}
});
});

@@ -398,0 +449,0 @@ },

42

lib/index.js

@@ -57,2 +57,5 @@ #! /usr/bin/env node

// Proxy Config
defaultConfig = this._setProxyConfig(defaultConfig, argv);
if (argv.ghostMode === "false") {

@@ -88,2 +91,41 @@ defaultConfig.ghostMode = false;

},
_setProxyConfig: function (defaultConfig, argv) {
var setOptions = function (split) {
defaultConfig.proxy = {
host: split[0],
port: split[1]
};
return defaultConfig;
};
if (typeof argv.proxy === "string") {
argv.proxy = argv.proxy.replace(/https?:\/\//, "");
argv.proxy = argv.proxy.replace(/^www\./, "");
if (argv.proxy.indexOf(":") !== -1 ) {
return setOptions(argv.proxy.split(":"));
}
if (argv.proxy.indexOf(",") !== -1 ) {
return setOptions(argv.proxy.split(","));
}
// Only host name here
var matched = /^(.+?)\//.exec(argv.proxy);
if (matched) {
return setOptions([matched[1], "80"]);
}
// no comma or colon, assume only hostname given
return setOptions([argv.proxy, "80"]);
}
if (argv.proxy) {
defaultConfig.proxy = argv.proxy;
return defaultConfig;
}
return defaultConfig;
},
/**

@@ -90,0 +132,0 @@ * Retrieve the config file

116

lib/messages.js
var clc = require("cli-color");
var _ = require("lodash");
var compile = require("./cli-strings.js").evalString;
// _todo - Make string outputs nicer with underscore templates
module.exports = {
connection: function (browser) {
return clc.cyan("Browser Connected! (" + browser.name + ", version: " + browser.version + ")");
var template = "{cyan:Browser Connected! (<%= name %>, version: <%= version %>)}";
var params = {
name: browser.name,
version: browser.version
};
return compile(template, params);
},
init: function (hostIp, socketIoPort, scriptPort) {
return clc.yellow('\n\nAll Set Up! Now copy & paste this snippet just before the closing </body> tag in your website.\n\n') +
this.scriptTags(hostIp, socketIoPort, scriptPort, false);
var template = "\n\n{cyan:All Set Up!} Now copy & paste this snippet just before the closing </body> tag in your website.\n\n <%= tags %>";
var params = {
tags: this.scriptTags(hostIp, socketIoPort, scriptPort)
};
return compile(template, params);
},
initServer: function (hostIp, scriptPort, baseDir) {
return clc.green("\nOK, Server running at ") + clc.magenta("http://" + hostIp + ":" + scriptPort + "\n\n") +
clc.green("Serving files from: ") + clc.magenta(baseDir) + "\n\n" +
clc.green("Go load a browser & check back here. If you set up everthing correctly, you'll see a " +
"'Browser Connected' message.\n");
var template = "\n{green:OK, Server running at} {magenta:<%= url %>}";
template += "\n{green:Serving files from: } {magenta:<%= baseDir %>}";
template += "\n\n{green:Load a browser & check back here. If you set up everything correctly, you'll see a} {cyan:'Browser Connected'} {green: message}\n";
var params = {
url: this._makeUrl(hostIp, scriptPort),
baseDir: baseDir
};
return compile(template, params);
},
scriptTags: function (hostIp, socketIoPort, scriptPort, colors) {
var tags = "<script src='http://" + hostIp + ":" + socketIoPort + this.socketIoScript + "'></script>\n" +
"<script src='http://" + hostIp + ":" + scriptPort + this.clientScript + "'></script>\n\n";
/**
* @param {String} host
* @param {Number} proxyPort
* @returns {Object}
*/
initProxy: function (host, proxyPort) {
if (colors) {
return clc.magenta(tags);
}
var template = "{green:Proxy running. Use this URL: }{magenta:<%= url %>}";
return tags;
var params = {
url: this._makeUrl(host, proxyPort)
};
return compile(template, params);
},
/**
* Helper for creating a URL
* @param host
* @param port
* @returns {string}
*/
_makeUrl: function (host, port) {
var string = "http://<%= host %>:<%= port %>";
return _.template(string)({host: host, port: port});
},
scriptTags: function (hostIp, socketIoPort, scriptPort) {
var template = "<script src='<%= url1 %>'></script>\n<script src='<%= url2 %>'></script>\n\n";
var params = {
url1: this._makeUrl(hostIp, socketIoPort) + this.socketIoScript,
url2: this._makeUrl(hostIp, scriptPort) + this.clientScript
};
return compile(template, params);
},
invalidBaseDir: function () {
return clc.cyan("Invalid Base Directory path for server. ( baseDir: )\n\n") +
clc.green("TIP: Don't use a forward slash at the beginning, and if you " +
"want to serve files from the root folder, just set the baseDir option to './' ");
var template = "{cyan:Invalid Base Directory path for server. Should be like this ( baseDir: 'path/to/app' )}";
return compile(template, {});
},

@@ -40,3 +90,3 @@ fileWatching: function (patterns) {

string = clc.cyan("Watching the following:\n");
string = compile("{green:Watching the following:}\n");

@@ -55,3 +105,3 @@ var limit = 10;

} else {
string = "Not watching anything...";
string = compile("{red:Not watching any files...}");
}

@@ -62,17 +112,33 @@

fileChanged: function (path) {
return clc.magenta("File Changed: " + clc.green(path));
var string = "{magenta:File Changed: }{green:<%= path %>}";
return compile(string, {path: path});
},
browser: {
reload: function () {
return clc.yellow("Reloading all connected browsers...");
var string = "{cyan:Reloading all connected browsers...}";
return compile(string);
},
inject: function () {
return clc.yellow("Injecting file into all connected browsers...");
var string = "{cyan:Injecting file into all connected browsers...}";
return compile(string);
}
},
location: function (url) {
return clc.yellow("Link clicked! Redirecting all browser to " + clc.green(url));
var template = "{yellow:Link clicked! Redirecting all browser to }{green:<%= url %>}";
var params = {
url: url
};
return compile(template, params);
},
socketConnector: function (host, port) {
return "var ___socket___ = io.connect('" + host + ":" + port + "');";
var string = "var ___socket___ = io.connect('<%= url %>');";
var params = {
url: this._makeUrl(host, port)
};
var compiled = compile(string, params);
return compiled;
},

@@ -79,0 +145,0 @@ clientScript: "/browser-sync-client.min.js",

6

package.json
{
"name": "browser-sync",
"description": "Live CSS Reload & Browser Syncing",
"version": "0.2.1",
"version": "0.3.0",
"homepage": "https://github.com/shakyshane/browser-sync",

@@ -40,5 +40,5 @@ "author": {

"optimist": "0.6.0",
"glob": "~3.2.7",
"dev-ip": "~0.1.5",
"gaze": "~0.4.3"
"gaze": "~0.4.3",
"http-proxy": "~0.10.3"
},

@@ -45,0 +45,0 @@ "devDependencies": {

97

README.md

@@ -11,3 +11,4 @@ # browser-sync [![Build Status](https://travis-ci.org/shakyShane/browser-sync.png?branch=master)](https://travis-ci.org/shakyShane/browser-sync)

5. **Live Reload** - I can also watch files like HTML and PHP & when they change I can reload all browsers for you.
6. **Built-in Server** - Yep, I can serve static files too. (this is the easiest option actually, explained later)
6. **Built-in Server** - Yep, I can serve static files too if you need me to
7. **Use with any back-end setup** - Browser-sync includes a proxy option so that it can be used with any existing PHP, Rails, Python, Node or ASP.net setup.

@@ -31,5 +32,6 @@ ##When is it useful?

###Examples
###Watching files
Watch ALL CSS files in a directory for changes
```

@@ -40,7 +42,29 @@ browser-sync --files "app/css/*.css"

Watch ALL CSS files & HTML files in a directory for changes
```
browser-sync --files "app/css/*.css, app/*.html"
```
###Watching files + your existing Server (proxy)
Using a local.dev vhost
```
browser-sync --proxy "local.dev" --files "app/css/*.css"
```
Using a local.dev vhost with PORT
```
browser-sync --proxy "local.dev:8001" --files "app/css/*.css"
```
Using a an IP based host
```
browser-sync --proxy "192.167.3.2:8001" --files "app/css/*.css"
```
###Watching files + built-in static server (for html, js & css)
Watch ALL CSS files for changes with a static server
```

@@ -51,2 +75,3 @@ browser-sync --files "app/css/*.css" --server

Watch ALL CSS files for changes with a static server & specify that the base dir should be "app"
```

@@ -57,2 +82,3 @@ browser-sync --files "app/css/*.css" --server "app"

Watch ALL CSS files for changes with a static server & specify that the base dir should be "app" & specify the index file (note the missing l)
```

@@ -63,2 +89,3 @@ browser-sync --files "app/css/*.css" --server "app" --index "index.htm"

Watch ALL CSS files for changes with a static server & specify that the base dir should be "app" & with ghostMode disabled
```

@@ -68,4 +95,4 @@ browser-sync --files "app/css/*.css" --server "app" --ghostMode false

###Example config file
If you want to, you can provide a config file instead of having to remember all of the command above. Also, a config file allows you to be more specific with options. Here's an example of one that you would put in the root of your project.
###Example config file with proxy
If you want to, you can provide a config file instead of having to remember all of the commands above. Also, a config file allows you to be more specific with options. Here's an example of one that you would put in the root of your project.

@@ -81,4 +108,4 @@ ```

},
server: {
baseDir: "app"
proxy: {
host: "local.dev" // your existing vhost
}

@@ -123,3 +150,3 @@ };

```
// Leave this set as null & browser-sync will try to figure out the correct IP to use.
// Leave this set as null & browser-sync will try to figure out the correct IP to use. (about 90% accurate)
host: null

@@ -134,7 +161,7 @@

```
// Here you can disable each feature individually
// Here you can disable/enable each feature individually
ghostMode: {
links: true,
forms: true,
scroll: true
scroll: false
}

@@ -146,3 +173,28 @@

###proxy - (default: null)
NOTE: `"localhost"` not supported here, try to use something else like `"0.0.0.0"` instead if you need to.
```
// use your existing vhost setup
proxy: {
host: "local.dev"
}
// use your existing vhost setup with a specific port
proxy: {
host: "local.dev",
port: 8001
}
// use an IP-based host (like the built-in php server for example)
proxy: {
host: "192.168.0.4",
port: 8001
}
```
###server - (default: null)
Server should only be used for static HTML, CSS & JS files. It should NOT be used if you have an existing PHP, Wordpress, Rails setup. That's what the proxy above is for.
```

@@ -154,2 +206,8 @@ // Serve files from the app directory

// Serve files from the app directory, with a specific index filename
server: {
baseDir: "app",
index: "index.htm"
}
// Serve files from the root directory

@@ -170,3 +228,3 @@ server: {

#Full config file example
#Full config file example with Server
Save this as `anything-you-like.js`

@@ -190,3 +248,22 @@

```
#Full config file example with Proxy
Save this as `anything-you-like.js`
```
module.exports = {
files: "app/css/**/*.css",
debugInfo: true,
host: "192.168.1.1",
ghostMode: {
links: true,
forms: true,
scroll: true
},
proxy: {
host: "local.dev" // your existing vhost setup.
},
open: false
};
```
Now you can use it by calling it from the command-line

@@ -193,0 +270,0 @@

9

test/new-server/findingPortsSpec.js
var si = require("../../lib/browser-sync");
var messages = require("../../lib/messages");
var _ = require("lodash");

@@ -10,7 +11,7 @@ var methods = new si();

it("should return ports two available ports", function () {
it("should return ports three available ports", function () {
var cb = jasmine.createSpy();
var ports = methods.getPorts(2, cb, {});
var ports = methods.getPorts(3, cb, {});

@@ -25,7 +26,9 @@ waitsFor(function () {

var arg2 = cb.mostRecentCall.args[0][1];
var arg3 = cb.mostRecentCall.args[0][2];
expect(/^(\d){4}$/.test(arg1)).toBe(true);
expect(/^(\d){4}$/.test(arg2)).toBe(true);
expect(/^(\d){4}$/.test(arg3)).toBe(true);
expect(arg1 !== arg2).toBe(true);
expect(_.uniq([arg1, arg2, arg3]).length).toBe(3);

@@ -32,0 +35,0 @@ });

6

test/new-server/testserverSpec.js

@@ -42,5 +42,4 @@ var si = require("../../lib/browser-sync");

var server;
var expectedString = "var ___socket___ = io.connect('localhost:" + ports[0] + "');";
var expectedString = "var ___socket___ = io.connect('http://localhost:" + ports[0] + "');";
var options = {

@@ -56,3 +55,4 @@ server: {

res.on("data", function (chunk) {
expect(chunk.toString().indexOf(expectedString)).toBe(0);
var string = chunk.toString();
expect(string.indexOf(expectedString)).toBe(0);
});

@@ -59,0 +59,0 @@ });

28

test/new-server/watchingFilesSpec.js

@@ -27,16 +27,16 @@ var fs = require("fs");

it("should call changeFile when a watched file is changed", function () {
methods.watchFiles(testFile1, io, methods.changeFile, {});
setTimeout(function () {
fs.writeFileSync(testFile1, "writing to file", "UTF-8");
}, 200);
waits(600);
runs(function () {
expect(methods.changeFile).toHaveBeenCalled();
});
});
// it("should call changeFile when a watched file is changed", function () {
//
// methods.watchFiles(testFile1, io, methods.changeFile, {});
//
// setTimeout(function () {
// fs.writeFileSync(testFile1, "writing to file", "UTF-8");
// }, 200);
//
// waits(600);
//
// runs(function () {
// expect(methods.changeFile).toHaveBeenCalled();
// });
// });
});
test/fixtures/scss/main.scss
.npmignore

Sorry, the diff of this file is not supported yet

test/fixtures/index.html

Sorry, the diff of this file is not supported yet