gulp-sitebuild-starter-kit

Sitebuild starter kit based on Gulp 4

Version: 4.0.5

Quickstart

Download the kit or clone this repository and build on what is included in the src directory.

Download and run the follwing code in that directory to get started.

$ npm i -g gulp-cli && npm i

or

$ yarn global add gulp-cli && yarn

Features

Please see our gulpfile for up to date information on what we support.

• CSS Autoprefixing
• Built-in preview server with BrowserSync
• Automatically compile Sass with libsass
• Map compiled CSS to source stylesheets with source maps
• Awesome image optimization
• Automatically generates html files from Panini templates
• Automatically generates table of contents from pages (if there is more than one page)

For more information on what this generator can do for you, take a look at the gulp plugins used in our package.json.

libsass

Keep in mind that libsass is feature-wise not fully compatible with Ruby Sass. Check out this curated list of incompatibilities to find out which features are missing.

If your favorite feature is missing and you really need Ruby Sass, you can always switch to gulp-ruby-sass and update the styles function in gulpfile accordingly.

Getting Started

• Install dependencies: npm i -g gulp-cli && npm i or yarn global add gulp-cli && yarn
• Run npm start or yarn start to preview and watch for changes
• Run npm run build or yarn build to build and optimize your sitebuild

Directory structure

.
└── src                    # Source folder
    ├── assets             # Assets folder containing fonts, images, styles, svgs etc.
    │   ├── favicons       # Favicons folder containing icons (.png, .ico, .svg etc.).
    │   ├── fonts          # Fonts folder containing fonts (.eot, .svg, .ttf, .woff, or .woff2).
    │   ├── images         # Images folder containing images (.jpg, .jpeg, .png, or .gif).
    │   ├── scripts        # Scripts folder containing JavaScript files (.js).
    │   └── styles         # Styles folder containing stylesheets (.scss, or .sass).
    ├── data               # Data folder containing external data, which will be passed in to every page (.json, or .yml).
    ├── helpers            # Helpers folder containing Handlebars helpers (.js).
    ├── layouts            # Layouts to a folder containing layouts (.html, .hbs, or .handlebars).
    ├── pages              # Pages to the root folder all pages live in.
    └── partials           # Partials to a folder containing HTML partials.

Browser Support (.browserslistrc)

At present, we officially aim to support the following browsers:

• > 5%
• last 2 versions
• not ie <= 10

This is not to say that kit cannot be used in browsers older than those reflected, but merely that our focus will be on ensuring our layouts work great in the above.

Inspiration

Gulp Sitebuild Starter Kit is inspired by HTML5 Boilerplate, Yeoman's generator-gulp-webapp and Web Starter Kit.

License

MIT © 2021 Gergely Kovács (gg.kovacs@gmail.com)