Quickstart documentation to help you get started.
Once downloaded, unzip the compressed folder or cloned you'll see something like this:
gulp-starter-kit/
├── .babelrc.js
├── .browserslistrc
├── .editorconfig
├── .eleventy.js
├── .eslintrc.js
├── .prettierrc.js
├── .stylelintrc.js
├── config.js
├── gulpfile.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── docs/
│ ├── README.md
│ └── recipes/
│ ├── README.md
│ ├── ...
└── src/
├── index.html
├── _data/
│ └── site.json
├── _includes/
│ ├── footer.html
│ ├── header.html
│ │── meta.html
│ └── layouts/
│ └── default.html
└── assets/
├── css/
│ ├── app.scss
│ ├── css-copy/
│ └── vendor/
├── fonts/
├── img/
└── js/
├── app.js
├── js-copy/
└── vendor/
Before you start, have a look at these files for a better understanding how Gulp Starter Kit works:
- gulpfile.js
- .eleventy.js
- config.js
- package.json
It's recommended that you keep the same folder structure to avoid headaches 😉. Howerver when you do rename the folders, manual modifications are needed.
src/assets
Anything you put in here will be copy to dist/assets
except for these folders:
- src/assets/js
- src/assets/img
- src/assets/css
src/assets/fonts
This folder contains the Font files of your project. Anything you put in here will be copy by default to dist/assets/fonts
.
src/assets/img
This folder contains the Image files of your project. Files with these extension jpg,jpeg,png,gif,svg,webp
will be copy by default to dist/assets/img
. In production, only files with these extension are compressed: jpg,jpeg,png,svg
.
src/assets/js
This folder contains the JavaScript files of your project. By default only app.js
will be compiled and the output folder is dist/assets/js
.
src/assets/js-copy
Any JS files in this folder will just be copy to dist/assets/js
.
src/assets/css
This folder contains the SCSS & CSS files of your project. By default only app.scss
will be compiled and the output folder is dist/assets/css
.
src/assets/css-copy
Any CSS files in this folder will be copy to dist/assets/css
and when prodcution
flag ist set, prefixes will apply except for files with *.min.css
prefix.
src
This folder contains the HTML source files of your project. You can use all the available template languages eleventy offers. We are using Nunjucks as the default template engine. More information.
src/_data
Any .json
files in this folder will be added into a global data object available to all templates. More information.
src/_includes
This folder is meant for Eleventy layouts, include, extends, partials or macros files. More information.