Last active
August 4, 2019 23:11
-
-
Save dustinleblanc/3b284108597146dd59a911ede4e24959 to your computer and use it in GitHub Desktop.
Setting up Lando with Browsersync
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
proxy: | |
node: | |
- appname-bs.lndo.site:3000 | |
services: | |
node: | |
type: node | |
# Change as needed | |
build: | |
- "cd /app && yarn install" | |
- "cd /app && yarn dev" | |
# Change as needed to start BS | |
command: cd /app && yarn watch | |
port: 3000 | |
tooling: | |
yarn: | |
service: node |
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
/** | |
* @file | |
*/ | |
const sass = require('node-sass'); | |
const tildeImporter = require('node-sass-tilde-importer'); | |
const autoprefixer = require('autoprefixer'); | |
const postcss = require('postcss'); | |
const url = require('postcss-url'); | |
const fs = require('fs'); | |
const paths = require('./paths'); | |
const postUrlOpts = { | |
url: 'inline', | |
encodeType: 'base64', | |
}; | |
module.exports = { | |
compileScss() { | |
sass.render({ | |
file: `${paths.src}/scss/app.scss`, | |
outFile: `${paths.dist}/app.css`, | |
importer: tildeImporter, | |
}, function(error, result) { | |
if (error) { | |
console.warn(error); | |
return false; | |
} | |
// Autoprefix the file. | |
postcss([autoprefixer]) | |
.use(url(postUrlOpts)) | |
.process(result.css).then(function(result) { | |
result.warnings().forEach(function(warn) { | |
console.warn(warn.toString()); | |
}); | |
// Write the file to disk. | |
fs.writeFile(`${paths.dist}/app.css`, result.css, function(err) { | |
if (!err) { | |
console.log('Compiled styles!'); | |
return true; | |
} else { | |
console.warn(err); | |
return false; | |
} | |
}); | |
}); | |
}); | |
return this; | |
}, | |
}; |
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
const browserSync = require('browser-sync').create(); | |
const actions = require("./lib/actions"); | |
const paths = require("./lib/paths"); | |
// Watch and compile SCSS | |
browserSync.watch(`${paths.src}/scss/**/*.scss`, function (event, file) { | |
actions.compileScss(); | |
}); | |
// Watch and compile JS | |
// browserSync.watch(`${paths.src}/js/**/*.js`, function (event, file) { | |
// no op for now, if we need to compile JS later, we'll do it here! | |
// }); | |
// Run the browserSync server | |
// We setup some overridable variables to tell browsersync where we want to proxy. | |
// This lets us proxy different services during theming and also handle | |
// different local dev configs. | |
const domain = | |
process.env.BS_DOMAIN || | |
'appname.lndo.site'; | |
const port = | |
process.env.BS_PORT || | |
80; | |
const proxyDomain = | |
process.env.BS_PROXY_DOMAIN || | |
'appserver_nginx.appname.internal'; | |
browserSync.init({ | |
files: [`${paths.dist}/app.css`, `${paths.src}/app.js`], | |
injectChanges: true, | |
proxy: proxyDomain, | |
socket: { | |
domain: domain, | |
port: port | |
}, | |
open: false | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment