Skip to content
This repository has been archived by the owner on Nov 10, 2017. It is now read-only.

Commit

Permalink
first release
Browse files Browse the repository at this point in the history
  • Loading branch information
ocombe committed Sep 25, 2014
1 parent eefe96f commit c0ed5f4
Show file tree
Hide file tree
Showing 7 changed files with 266 additions and 1 deletion.
72 changes: 72 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
#################
## Eclipse
#################

*.pydevproject
.project
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.classpath
.settings/
.loadpath

# External tool builders
.externalToolBuilders/

# Locally stored "Eclipse launch configurations"
*.launch

# CDT-specific
.cproject

# PDT-specific
.buildpath


#############
## Windows detritus
#############

# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Mac crap
.DS_Store


#############
## Intellij
#############

nbproject
manifest.mf
build.xml

.project
.settings
.idea/*
*.iml


#############
## Project
#############
public
node_modules/*
npm-debug.log
bower_components

test/test-results.xml
13 changes: 13 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.lock-wscript
.svn/
.hg/
.git/
CVS/
*~
*.bak
.DS_Store
npm-debug.log
test/
src/
CHANGELOG.md

2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# 0.0.1 (25 September 2014)
* Initial release
46 changes: 45 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,48 @@
browser-sync-brunch
===================
Adds automatic browser reloading support to
[brunch](http://brunch.io) when using the `brunch watch` command.

Adds browser-sync support to brunch for automatic browser reloading and much more !
The plugin uses [BrowserSync](https://github.com/shakyShane/browser-sync) technology to keep multiple browsers & devices in sync when building websites.

##Features from BrowserSync
1. **Scroll** - I can keep your pages in sync when scrolling.
2. **Forms** - You fill out a form in one browser, I'll copy the data to all the others.
3. **Links** - I'll watch your clicks and make all the other browsers follow you.
4. **CSS injecting** - I can even watch your CSS files & inject them when they change.
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 if you need me to (uses Connect).
7. **Use with any back-end setup** - I even have a proxy option so that I can be used with existing PHP, Rails, Python, Node or ASP.net setup.
8. **Public URL** - View your website via a URL that any internet connected device can access & maintain all BrowserSync features.
9. **Browser Stack support** - Use the all of my features when viewing your site through Browser Stack.

## Installation
Install the plugin via npm with `npm install --save browser-sync-brunch`.

Or, do manual install:

* Add `"browser-sync-brunch": "x.y.z"` to `package.json` of your brunch app.
* If you want to use git version of plugin, add
`"browser-sync-brunch": "git+ssh://[email protected]:ocombe/browser-sync-brunch.git"`.

## Usage
In most cases, browser-sync-brunch works out of the box without any further
configuration. Stylesheet and image changes will be applied seamlessly, and any other
changes will trigger a page refresh.

### Brunch plugin settings
If customization is needed or desired, settings can be modified in your brunch config file (such as `brunch-config.coffee`).
You can use any BrowserSync option, refer to [their documentation](http://www.browsersync.io/docs/options/) for the complete list.

**Example:**
```js
exports.config: {
...
plugins: {
browserSync: {
port: 3333,
logLevel: "debug"
}
}
}
```
114 changes: 114 additions & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
var sysPath = require('path'),
browserSync = require("browser-sync"),
extend = require("extend"),
injectFileTypes = [ '.css', '.png', '.jpg', '.jpeg', '.svg', '.gif', '.webp' ],
isInjectable = function(file) {
return injectFileTypes.indexOf(sysPath.extname(file)) > -1;
};

// register the snippet plugin
browserSync.use({
"plugin:name": 'Snippet Injector',
plugin: function(bs, opts) {}
});

function BrowserSync(config) {
var self = this;
if(config == null) config = {};
var bsConfig = {
logSnippet: false
};
var plugins = config.plugins || {};
var cfg = plugins.browserSync || {};
if(config.persistent) {
self.enabled = (cfg.enabled == null) ? true : cfg.enabled;
}
extend(bsConfig, cfg);

var startServer = (function() {
if(!browserSync.active) {
browserSync(bsConfig, function(err, bs) {
self.server = bs;
injectFileTypes = (bs.options.injectFileTypes || injectFileTypes).map(function(ext) {
return '.'+ext;
});
if(self.onServerSnippet) {
self.onServerSnippet(bs.options);
}
if(err) {
console.error("browserSync " + err);
}
});
}
});

if(self.enabled) startServer();
}

BrowserSync.prototype.brunchPlugin = true;
BrowserSync.prototype.type = 'javascript';
BrowserSync.prototype.extension = 'js';

// after each compilation
BrowserSync.prototype.onCompile = function(changedFiles) {
var enabled = this.enabled;
if(!enabled) return;

var didCompile = changedFiles.length > 0;
var files = changedFiles.map(function(obj) {
return obj.path;
});
var injectable = didCompile && files.every(isInjectable);

if(toString.call(enabled) === '[object Object]') {
if(!(didCompile || enabled.assets)) return;
var changedExts = files.map(function(f) {
return sysPath.extname(f).slice(1);
});
var wasChanged = !Object.keys(enabled).some(function(_) {
return enabled[_] && changedExts.indexOf(_) !== -1;
});
if(wasChanged) return;
}

var reload = function() {
if(injectable) {
browserSync.reload(files);
} else {
browserSync.reload();
}
};

reload();
};

// file to include
//var incPath = sysPath.join(__dirname, 'vendor', 'browser-sync.js');

//var incPath = sysPath.join(__dirname, '..', 'node_modules', 'browser-sync-client', 'dist', 'browser-sync-client.js');
//var incPath = sysPath.join(__dirname, 'vendor', 'browser-sync-client.js');
var incPath = sysPath.join(__dirname, 'vendor', 'browser-sync-injector.js');
BrowserSync.prototype.include = function() {
return this.enabled ? [incPath] : [];
};

// stop the server on brunch stop
BrowserSync.prototype.teardown = function() {
if(browserSync.active) browserSync.exit();
};

BrowserSync.prototype.compile = function(params, callback) {
if(this.enabled && sysPath.basename(params.path) === 'browser-sync-injector.js') {
this.onServerSnippet = function(opt) {
params.data = "document.write(\"<script async src='//HOST:"+opt.port+"/browser-sync/browser-sync-client."+this.server.version+".js'><\/script>\".replace(/HOST/g, location.hostname));";
callback(null, params);
}.bind(this);
if(this.server) {
this.onServerSnippet(this.server.options);
}
} else {
return callback(null, params);
}
};

module.exports = BrowserSync;
1 change: 1 addition & 0 deletions lib/vendor/browser-sync-injector.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// we'll update the file at compile time
19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "browser-sync-brunch",
"version": "0.0.1",
"description": "Adds browser-sync support to brunch for automatic browser reloading and much more",
"author": "Olivier Combe <[email protected]>",
"homepage": "https://github.com/ocombe/browser-sync-brunch",
"keywords": ["brunchplugin", "auto-reload", "auto reload", "browser-sync", "browser sync", "browsersync"],
"repository": {
"type": "git",
"url": "[email protected]:ocombe/browser-sync-brunch.git"
},
"main": "./lib/index",
"scripts": {},
"dependencies": {
"browser-sync": "~1.5.1",
"extend": "~1.3.0"
},
"devDependencies": {}
}

0 comments on commit c0ed5f4

Please sign in to comment.