Skip to content

Instantly share code, notes, and snippets.

@raphaelsaunier

raphaelsaunier/index.html

Last active June 26, 2017 16:11
Show Gist options
  • Save raphaelsaunier/543f4276dcfd265ad58e5f98c07592ec to your computer and use it in GitHub Desktop.
Save raphaelsaunier/543f4276dcfd265ad58e5f98c07592ec to your computer and use it in GitHub Desktop.
Download ZIP
Simple SASS + Babel + BrowserSync NPM script
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- SCSS source file: src/styles.scss-->
<link rel="stylesheet" type="text/css" href="./dist/styles.css">
</head>
<body>
<!-- ES2015 source file: src/main.js -->
<script src="./dist/main.js"></script>
</body>
</html>
Raw
package.json
{
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.18.12",
"concurrently": "^3.5.0",
"node-sass": "^4.5.3",
"webpack": "^3.0.0"
},
"scripts": {
"watch:styles": "node-sass --watch src/styles.scss dist/styles.css",
"watch:scripts": "webpack --module-bind=\"js=babel-loader?presets=es2015\" src/main.js dist/main.js --watch",
"livereload": "browser-sync start -s -f dist/*",
"dev": "concurrently --kill-others \"npm run watch:scripts\" \"npm run watch:styles\" \"npm run livereload\"",
"build:scripts": "webpack --module-bind=\"js=babel-loader?presets=es2015\" src/main.js dist/main.min.js -p",
"build:styles": "node-sass src/styles.scss dist/styles.min.css --output-style=compressed",
"build": "concurrently \"npm run build:scripts\" \"npm run build:styles\""
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment