Skip to content

Instantly share code, notes, and snippets.

@reepush
Last active December 13, 2015 17:14
Show Gist options
  • Save reepush/5d9bb62112b4bf183926 to your computer and use it in GitHub Desktop.
Save reepush/5d9bb62112b4bf183926 to your computer and use it in GitHub Desktop.
Proxify assets with BrowserSync

Use BrowserSync as proxy with serving local files.

html {
background-color: #fafafa;
}
var angle = 0
var logo = document.querySelector('.home-logo')
setInterval(function() {
angle = (angle + 20) % 360
logo.style.transform = 'rotate(' + angle + 'deg)'
}, 100)
var gulp = require('gulp'),
bs = require('browser-sync').create()
gulp.task('browser-sync', function() {
bs.init({
proxy: {
target: 'https://www.yandex.ru/',
proxyRes: [function(res, req) {
// Remove content-security-policy header
// to allow BrowserSync connections.
delete res.headers['content-security-policy']
}]
},
port: 3000,
serveStatic: ['./'],
rewriteRules: [
{
match: /<\/body>/,
fn: function() {
return '<script src="/custom.js"></script>\n'
}
},
{
match: /<\/head>/,
fn: function() {
return '<link rel="stylesheet" href="/custom.css">\n'
}
}
]
})
})
gulp.task('default', ['browser-sync'], function() {
gulp.watch('custom.js', bs.reload)
// We need to tell BrowserSync that stylesheet was changed
// for injection without page reloading.
gulp.watch('custom.css', bs.reload.bind(null, 'custom.css'))
})
{
"private": "true",
"dependencies": {
"browser-sync": "^2.10.0",
"gulp": "^3.9.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment