Disclaimer : this is a quick code, nothing is clean really but, let's stay pragmatic, it works.
To begin you'll need NodeJS or Yarn.
npm install
or yarn install
This website use gulp for it's pipeline and have this features:
- SCSS to CSS files from
src/scss
withautoprefixer
- SVG Sprite by combining all files in
src/icons/*.svg
- Optimizing images in
src/img
and copy them in thedist
folder - Live reload all the things with BrowserSync 🚀
To start the development server, you need to run the watch script.
npm run watch
or yarn watch
Then go to http://localhost:1234/index.html
To build HTML and CSS files :
npm run build
or yarn build
This starter use Nunjucks for it's templating engine. To create a page, you have to create a file in the src
folder with the name of your page. For example src/my-page.njk
. This will generate a file called my-page.html and you'll be able to access it in your browser.
Nunjucks page example:
{% extends "./layouts/home.njk" %}
{% block content %}
<h1>Page 1</h1>
{% endblock %}
You have to launch the generate
script to generate with Puppeteer
a screenshot of the page.