Created
September 5, 2016 19:46
-
-
Save happycollision/0cd4afbc36f8632e26ab813a74072040 to your computer and use it in GitHub Desktop.
Rails and Browsersync without a need for Gulp or Grunt. Thanks to @wnstn and @maykefreitas.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This gist is based on @wnstn's great [gist](https://gist.github.com/wnstn/36010c8378e850cc3580) | |
// and @maykefreitas's [advice](https://github.com/BrowserSync/browser-sync/issues/977#issuecomment-236443965) about turbolinks. | |
// Code below is generated after running `browser-sync init` in your project's root directory. | |
// I commented the lines I changed or added so you can run it from scratch as well, if you like. | |
/* | |
|-------------------------------------------------------------------------- | |
| Browser-sync config file | |
|-------------------------------------------------------------------------- | |
| | |
| For up-to-date information about the options: | |
| http://www.browsersync.io/docs/options/ | |
| | |
| There are more options than you see here, these are just the ones that are | |
| set internally. See the website for more info. | |
| | |
| | |
*/ | |
module.exports = { | |
"ui": { | |
"port": 3001, | |
"weinre": { | |
"port": 8080 | |
} | |
}, | |
// The following was originally: | |
// "files": false, | |
"files": [ | |
"app/assets/stylesheets/**/*.scss", | |
"app/assets/javascripts/**/*.js", | |
"app/views/**/*.erb" | |
], | |
"watchOptions": {}, | |
"server": false, | |
// This gets it running properly with Rails | |
"proxy": "localhost:3000", | |
"port": 3000, | |
"middleware": false, | |
"serveStatic": [], | |
"ghostMode": { | |
"clicks": true, | |
"scroll": true, | |
"forms": { | |
"submit": true, | |
"inputs": true, | |
"toggles": true | |
} | |
}, | |
"logLevel": "info", | |
"logPrefix": "BS", | |
"logConnections": false, | |
"logFileChanges": true, | |
"logSnippet": true, | |
// This snippetOptions bit is new and takes care of turbolinks clashing with browsersync | |
"snippetOptions": { | |
rule: { | |
match: /<\/head>/i, | |
fn: function (snippet, match) { | |
return snippet + match; | |
} | |
} | |
}, | |
"rewriteRules": false, | |
"open": "local", | |
"browser": "default", | |
"xip": false, | |
"hostnameSuffix": false, | |
"reloadOnRestart": false, | |
"notify": true, | |
"scrollProportionally": true, | |
"scrollThrottle": 0, | |
"scrollRestoreTechnique": "window.name", | |
"scrollElements": [], | |
"scrollElementMapping": [], | |
"reloadDelay": 0, | |
"reloadDebounce": 0, | |
"reloadThrottle": 0, | |
"plugins": [], | |
"injectChanges": true, | |
"startPath": null, | |
"minify": true, | |
"host": null, | |
"codeSync": true, | |
"timestamps": true, | |
"clientEvents": [ | |
"scroll", | |
"scroll:element", | |
"input:text", | |
"input:toggles", | |
"form:submit", | |
"form:reset", | |
"click" | |
], | |
"socket": { | |
"socketIoOptions": { | |
"log": false | |
}, | |
"socketIoClientConfig": { | |
"reconnectionAttempts": 50 | |
}, | |
"path": "/browser-sync/socket.io", | |
"clientPath": "/browser-sync", | |
"namespace": "/browser-sync", | |
"clients": { | |
"heartbeatTimeout": 5000 | |
} | |
}, | |
"tagNames": { | |
"less": "link", | |
"scss": "link", | |
"css": "link", | |
"jpg": "img", | |
"jpeg": "img", | |
"png": "img", | |
"svg": "img", | |
"gif": "img", | |
"js": "script" | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
*** Don't actually include this comment in the file. Bad JSON. *** | |
This file is generated when you `npm init` from the terminal. | |
Run `npm install browser-sync --save-dev` to get browser-sync added to `devDependencies` below | |
Then manually add the `scripts.browsersync` bit below. | |
Finally, open one terminal window for Rails and one for Browsersync. | |
Run `rails s` (or `rails -s -b 0.0.0.0:3000` if you have trouble) in one window. | |
Run `npm run browsersync` in the other. | |
*/ | |
{ | |
"name": "your-package-name", | |
"version": "1.0.0", | |
"description": "This README would normally document whatever steps are necessary to get the application up and running.", | |
"main": "index.js", | |
"directories": { | |
"test": "test" | |
}, | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1", | |
"browsersync": "browser-sync start -c bs-config.js" | |
}, | |
"author": "@your-handle", | |
"devDependencies": { | |
"browser-sync": "^2.13.0" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Rails error screens are still problematic and require a manual refresh, but oh well.