Web ES6 Template
This template is aimed towards people in need of a solid development environment to create single page websites. It has a useful set of gulp tasks that will make developing a website a much frictionless process, such as auto reloading on source code changes, and generation of a deployment version with several optimizations to keep your website lightweight and compatible.
Table of contents
This template contains several build improvements and development features that will make kickstarting your website a breeze.
- BrowserSync (Reload your application in multiple devices while developing)
- SASS (.scss) support
- Babel (Use ES6 - ES2015, the result will be transpiled for compatibility with current browsers)
- Bower (Manages Front End Dependencies... JQuery and Fontawesome are included as an example)
- Rev (Busts cache by hashing files after building)
- Cssnano (Minifies CSS and adds cross-browser compatibility)
####Install project dependencies npm handles the installation of the dependencies within the project. Install the dependencies with the following command.
$ npm install
Install additional dependencies
Client side dependencies are managed by bower, to add or remove bower components, use the following command. prepending the bower command with
npm run bower -- ensures you are using the local bower installation, avoiding installing bower as a global dependency.
If you do have bower installed globally, you don't need to use this command. Instead refer to the default bower usage guide.
# to install $ npm run bower -- [bower-command]
BrowserSync is used to create a static server with live reloading feature when there's any file change.
The local server is running by default on port
8080, with the BrowserSync management UI on port
These settings can be easily changed in
$ npm start
Note: When running the server, your default browser will automatically open the website, and the terminal output will provide the local and external URLs for easy testing on other devices.
Building the distributable assets
When you're all set, you can create the distributable version that you can upload to your hosting platform.
$ npm run build
The built version contains:
- Your scripts merged into index.js
- Your bower dependency scripts merged into vendor.js
- Your styles merged into main.css
- Your bower dependency styles merged into vendor.css
- Your scripts and styles will be minified and compressed.
- Your files will be automatically appended with a build hash to bust cache, and the hashed filenames will be updated on index.html
Run the development server and start editing.
All the modifications should be performed in the
/src directory, unless you change the build tasks found in the
This template, in its current state, it's meant to be used to develop one page websites. The editing of the content should be done in
index.html. It will be automatically reflected on all your connected browsers.
SCSS is used for styles.
By default, the project includes a set of partials, such as
_fonts.scss, which are imported from the
These are for example purposes only, so make sure to give the website your own touch.
To keep consistency, follow these general rules:
- make sure to add all possibly repeated values in
- Add any CSS fonts (like Google Fonts) in
- Add mixins to
Note that this is only a minimal organization guide, and you can tailor this to your specific purposes. To read more on how to create an organized structured for your SASS styles, Click Here
The entry point for the SASS compiler is
main.scss, so make sure to
@import all the partial files you create on
main.scss. You can change the this setting in
Important: You don't need to update the references to the css files in the
index.html file. The build tasks will handle this for you seamlessly.
Write your scripts in ES6 - Read more on ES6 Features
And add the
.js files to the
src/js directory. You don't need to add the script tags to the
index.html file, All your
Again, you don't need to include the script tags into the
index.html file. All bower scripts are combined into
vendor.js and added automatically to the html file during the build process.