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

• NodeJS
• Gulp
• Yarn

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:

• Sage
• HTML5 Boilerplate
• Front-endboilerplate

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.