Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sutter/static-boilerplate
Static website generator PUG/SCSS/ES6
https://github.com/sutter/static-boilerplate
boilerplate es2015 generator gulp pug scss webpack
Last synced: about 1 month ago
JSON representation
Static website generator PUG/SCSS/ES6
- Host: GitHub
- URL: https://github.com/sutter/static-boilerplate
- Owner: sutter
- Created: 2017-04-05T20:42:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-06T07:21:22.000Z (almost 8 years ago)
- Last Synced: 2024-11-13T19:18:59.123Z (2 months ago)
- Topics: boilerplate, es2015, generator, gulp, pug, scss, webpack
- Language: ApacheConf
- Homepage: https://static-boilerplate.netlify.com
- Size: 87.9 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Static Boilerplate
Static website generator PUG/SCSS/ES6
Work on **app/** folder and gulp build in **build/**.
## Installation
### Node version manager
Install [NVM](https://github.com/creationix/nvm)
Use the version 7.5.0 of NodeJS.
```
nvm use
```
### Install Sass
Go to [sass-lang.com/install](http://sass-lang.com/install) for installation in command line.
### Install Yarn
Got to [https://yarnpkg.com/docs/install](https://yarnpkg.com/docs/install/#mac-tab)
### Download the dependencies NPM
```
yarn install
```
## Gulp Tasks
### Run project
```
yarn run start
```
### Build project
```
yarn run build
```
### Clean project
```
yarn run clean
```
### Optimize for production
* Minify HTML
* Optimise images
* Optimise and minify scripts with webpack
* Optimise and minify styles with CSSO
## How the starter works
### Works with Pug templating
The PUG files are located in `./app/template`
* **layout** : layout of html files generated
* **mixin** : for reusable pattern
* **pages** : the content of html files generated
* **partial** : includes of html pattern
* **config.pug** : global variables
### Works with JavaScript
The Javascript files are located in `./app/assets/js`.
**Use the ES6 syntaxe** Babel convert it in ES5 for you via webpack.
### Working with Images
The Image files are located in `./app/assets/img`
Accepted file formats : - jpg - png - gif - svg
### Working with Fonts
The font files are located in `./app/assets/font`