Enjoy hand-writing your HTML? Keep it old-school with modern build tools. This boilerplate setup makes it easier to write your own styling, scripts, and mark-up.
- Write SCSS and modern JavaScript code in
src
and build minified, transpiled code for production indist
- Linting tests
- Live reloading with webpack-dev-server
- ES6+ to ES5 transpilation, bundling, and minification
- SCSS to CSS transpilation, bundling, autoprefixing, and minification
- Automatic copying of HTML and static assets from
src
todist
folders - Linting for styles and scripts
- Write all your ES2015+ Javascript code in
src/js
and SCSS styling insrc/styles
. Store static assets insrc/assets
. Organize HTML files the way you like. - Available commands:
npm run build
: Build files to thedist
folder. Transpiles down to ES5 and bundles all JS intoapp.bundle.js
. Transpiles SCSS to CSS and adds prefixing intostyle.bundle.css
. Copies static assets and HTML over, and bundled CSS and JS gets added to HTML file.npm run dev
: Runwebpack-dev-server
atlocalhost:9000
. Includes live reloading on any Javascript/SCSS/HTML changes.npm run preview
: Builds files and runs a local production server onlocalhost:8080
withhttp-server
.npm run lint:js
: Lints JS with ESLint.npm run lint:styles
: Lints SCSS stylesheets with stylelint.npm run lint:html
: Lints HTML for a11y issues using pa11y.