Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ggkovacs/gulp-sitebuild-starter-kit
Sitebuild starter kit based on gulp.js
https://github.com/ggkovacs/gulp-sitebuild-starter-kit
frontend gulp html-css-javascript libsass ruby-sass sass sitebuild starter-kit
Last synced: 6 days ago
JSON representation
Sitebuild starter kit based on gulp.js
- Host: GitHub
- URL: https://github.com/ggkovacs/gulp-sitebuild-starter-kit
- Owner: ggkovacs
- License: mit
- Archived: true
- Created: 2014-11-25T14:22:38.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T13:54:10.000Z (over 2 years ago)
- Last Synced: 2024-09-20T18:23:13.540Z (12 days ago)
- Topics: frontend, gulp, html-css-javascript, libsass, ruby-sass, sass, sitebuild, starter-kit
- Language: JavaScript
- Homepage:
- Size: 4.06 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [gulp](https://github.com/gulpjs/gulp)-sitebuild-starter-kit [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
> 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](https://github.com/ggkovacs/gulp-sitebuild-starter-kit/releases/latest) and run the follwing code in that directory to get started.
```sh
$ npm i -g gulp-cli && npm i
```
or
```sh
$ yarn global add gulp-cli && yarn
```
## Features
Please see our [gulpfile](gulpfile.babel.js) for up to date information on what we support.
* CSS [Autoprefixing](https://github.com/postcss/autoprefixer)
* Built-in preview server with [BrowserSync](https://www.browsersync.io/)
* Automatically compile [Sass](http://sass-lang.com/) with [libsass](http://libsass.org)
* Map compiled CSS to source stylesheets with [source maps](https://www.npmjs.com/package/gulp-sourcemaps)
* Awesome [image optimization](https://www.npmjs.com/package/gulp-imagemin)
* Automatically generates html files from [Panini](https://github.com/zurb/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](package.json) used in our `package.json`.*
## libsass
Keep in mind that libsass is feature-wise not fully compatible with Ruby Sass. Check out [this](http://sass-compatibility.github.io) 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](https://github.com/sindresorhus/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](https://html5boilerplate.com/), Yeoman's [generator-gulp-webapp](https://github.com/yeoman/generator-gulp-webapp) and [Web Starter Kit](https://github.com/google/web-starter-kit).
## License
MIT © 2021 Gergely Kovács ([email protected])
[daviddm-image]: https://david-dm.org/ggkovacs/gulp-sitebuild-starter-kit/dev-status.svg
[daviddm-url]: https://david-dm.org/ggkovacs/gulp-sitebuild-starter-kit#info=devDependencies
[travis-image]: https://travis-ci.com/ggkovacs/gulp-sitebuild-starter-kit.svg?branch=master
[travis-url]: https://travis-ci.com/ggkovacs/gulp-sitebuild-starter-kit