Skip to content
Front-end boilerplate for static websites
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gulp
public
src
.babelrc
.editorconfig
.gitignore
LICENSE
README.md
gulpfile.babel.js
package.json
yarn.lock

README.md

myboilerplate

Simple front-end boilerplate with everything needed to start the development of simple web pages/web apps

Features

  • SCSS compiler
  • Autoprefixer
  • CSS and Javascript concatenation and compression
  • Image compression
  • Browsersync
  • Ability to manage dependencies in config.json
  • Javascript Linter

Project file structure

.
├── gulp
│   ├── config.json
│   ├── enabled.js
│   └── tasks
│       ├── build.js
│       ├── clean.js
│       ├── fonts.js
│       ├── images.js
│       ├── scripts.js
│       ├── styles.js
│       └── watch.js
├── gulpfile.babel.js
├── LICENSE
├── package.json
├── public
│   ├── 404.html
│   ├── dist
│   │   ├── scripts
│   │   │   └── main.js
│   │   └── styles
│   │       └── main.css
│   ├── humans.txt
│   ├── index.html
│   └── robots.txt
├── README.md
├── src
│   ├── fonts
│   ├── images
│   ├── scripts
│   │   └── main.js
│   └── styles
│       ├── base
│       │   ├── _base.scss
│       │   ├── _container.scss
│       │   ├── _fonts.scss
│       │   ├── _mixins.scss
│       │   └── _variables.scss
│       ├── components
│       │   ├── _buttons.scss
│       │   └── _forms.scss
│       ├── layout
│       │   ├── _footer.scss
│       │   ├── _header.scss
│       │   ├── _navbar.scss
│       │   └── _sections.scss
│       └── main.scss
└── yarn.lock  

Install

Requirements

Install

Download / Clone repo and CD into the created folder

$ git clone https://github.com/luism-s/myBoilerplate.git projectname 

$ cd projectname/src

Install Node dependencies

$ yarn install

Configure your virtualhost Url to feed browsersync (notes below).

Virtualhost and Browsersync

For Browsersync, you can configure your virtualhost URL either by using gulp/config.json file.

  • Create your virtual domain using your local hosts file (for OSX it's in /etc/hosts)
  • Change devUrl variable in the config file with your virtual domain

Use it

CD into the project folder

$ cd projectname/src

Run tasks once:

$ gulp

Clean 'public/dist' folder:

$ gulp clean

Watch for changes:

$ gulp watch

Build for production:

$ gulp build --prod

Acknowledgements

This project is influenced by similar projects such as:

Known Issues

Gulp watch will only listen to changes in assets folders that already have something inside in the beginning. If src/images/ is empty, it wont run the task when th first file is added.

You can’t perform that action at this time.