A boilerplate for building a static app/website with ES6 and SASS.
This project was created to enable the easy, setup-free use of ES6 and SASS while creating a static website/app.
- Dev-server to aid development by automatically refreshing the browser whenever an edit is made to any of the source files.
- Build script that:
- Converts all ES6 to browser friendly ES5.
- Converts SASS to CSS and adds vendor prefixes to CSS rules.
- Minifies, concatenates, and bundles all JavaScript and CSS files.
- Compresses images.
The only development dependency of this project is Node.js. Once Node is installed:
git clone https://github.com/mdziedzic/build-boilerplate-static-es6-sass.git
cd build-boilerplate-static-es6-sass
npm install
Sample files are included in source. These files are meant to be replaced. The only constraint is that there must be a source/index.js file. Place all other files inside source (nested sub-directories allowed).
npm run start to start the dev-server and view site at: http://localhost:8080. As files are edited in source the browser will update.
npm run build to create a production build of the site in build directory at project root. This is a static build so it can be opened directly in a browser.
This project uses Webpack which relies on a dependency graph. What this means as far as this project is concerned is that all JavaScript, SASS, and CSS files must be imported in index.js (or in files that can be accessed via index.js). See the sample included with the project at source/index.js for an example of how to do this.
Nothing special needs to be done to HTML and image files apart from placing them somewhere in source.
The build script losslessly compresses the images. To disable image compression when running npm run build, simply remove the --compress flag in the postbuild script in package.json.
To use a font from a CDN (like Google Fonts), place the <link> in the <header> of each HTML page that requires the font. Local fonts that are included in source but are not referenced by a SCSS/CSS/JavaScript file will not be included in the build.
To use jQuery, first install it as a dependency: npm install --save jquery. Then include import $ from 'jquery'; at the top every JavaScript file that uses jQuery.
Use the browserslist file to list supported browsers. This affects what vendor prefixes get applied to the CSS, among other things. (See https://github.com/ai/browserslist for more information on how to use this file).
Please use the issue tracker to report any bugs or file feature requests.
Michael Dziedzic (michaeldziedzic.com)
The code is available under the MIT license.