Build Boilerplate: Static/ES6/SASS
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.
Features
- 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.
Installation
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
Usage
Development
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.
Build
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.
Notes
JavaScript, SASS, CSS files
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.
HTML and images
Nothing special needs to be done to HTML and image files apart from placing them somewhere in source.
Image Compression
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.
Fonts
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.
jQuery
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.
Supported Browsers
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).
Contributing
Bug Reports & Feature Requests
Please use the issue tracker to report any bugs or file feature requests.
Author
Michael Dziedzic (michaeldziedzic.com)
License
The code is available under the MIT license.