moustafabayommy / frontend-starter

Frontend boilerplate for local frontend web development with Webpack, Browsersync, Sass, Handlebars

Project Template

Because web development doesn't need to be a pain.

The project template is the way to build static sites fast. With one command, build a static page using Webpack, Gulp, Handlebars.js, and SCSS.

[ES6]

Features

• Install the project in just three commands (see "Developing" below).
• Use Handlebars.js to keep our HTML organized into templates and partials.
• Use SCSS to keep our CSS organized into logical components.
• Use Browsersync to automatically launch a development version of our website, reload the page whenever we change the HTML, and inject changes to CSS, JavaScript, and images with needing to reload.
• Use HTML Minifier, and optimize our HTML, CSS, JavaScript, and images, respectively.

All with one command from the terminal:

yarn start

Setup

npm install -g gulp  # May require `sudo`

Developing

yarn install            # One time
gulp serve

Reminders

If you want to use this repo for your next project, make sure to make the following changes:

1. Edit data.yml, filling in the HTML metadata associated with your site.
2. Edit package.json providing a name, version, description, license, and repository.url.
3. Remove the .git folder, so that you start from a fresh commit history.
4. Edit README.md to your preference.

Gulp Commands

An overview of Gulp commands available:

gulp build

Builds the site into the dist directory. This includes:

• SCSS, sourcemaps and autoprefixing
• JS uglification
• Handlebars to HTML

gulp build:optimized

This is used for distributing an optimized version of the site (for deployment). It includes everything from gulp build as well as:

• SCSS minification
• CSS / JS inline-sourcing

gulp watch

Watchs for changes in local files and rebuilds parts of the site as necessary, into the dist directory.

gulp serve

Runs gulp watch in the background, and serves the dist directory at localhost:3000 with automatic reloading using Browsersync.

Structure

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.