Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]
This starterkit allows you to have a quickly start in building your website.
Give some love
Table of Contents
Status
ChangeLog
You can check the changelog here
Setup
- Download Node.js from your favorite browser here
- Restart your PC (just in case)
Installation
- Clone this project
- Open the Project with your favorite IDE
- Run the Shell
- In the Shell run the following commands:
npm i -g npm gulp gulp-cli(if is your first project using npm and gulp)npm igulp buildto compile files todistfolder
Features
- A live-reloading server with Browsersync
- Automated build process that includes, but is not limited to: SCSS compilation (with Autoprefixer included) and image optimization
- Ability to add 3rd party plugins easily -
gulp/_config.js - Minified CSS & JS in dist folder
- SourceMaps for better debugging
- Core JS files includes (e.g.: URL external fix for security issue)
- Code Formatted with Prettier
- Compiling HTML files from Pug
- Writing Pug with JSON, to separate logic from content
- Favicons Included
- Styleguide with links for templates/modules
- Cookiebar compliant with EU rules, fully customizable
Tasks
gulp- Create the local server (BrowserSync) and watch for source filesgulp build- Compiles source files intodistfolder, also cleans unused files indist
Project Structure
| .prettierrc
| .gitignore
| gulpfile.js
| LICENSE
| package-lock.json
| package.json
| README.md
|
+---dist
| | index.html
| |
| +---assets
| | +---css
| | | | styleguide.min.css
| | | | styleguide.min.css.map
| | | | styles.min.css
| | | | styles.css.min.map
| | | |
| | | \---vendor
| | | vendor.min.css
| | | vendor.min.css.map
| | |
| | +---img
| | | \---favicon
| | | apple-touch-icon-57x57.png
| | | apple-touch-icon-72x72.png
| | | apple-touch-icon-114x114.png
| | | apple-touch-icon-120x120.png
| | | apple-touch-icon-144x144.png
| | | apple-touch-icon-152x152.png
| | | favicon-16x16.png
| | | favicon-32x32.png
| | | favicon.ico
| | | mstile-144x144.png
| | |
| | \---js
| | +---app
| | | app.js
| | | app.js.map
| | |
| | \---vendor
| | vendor.js
| | vendor.js.map
| |
| \---views
| +---skeleton
| | | layout.html
| | |
| | +---footer
| | | footer.html
| | | scripts.html
| | |
| | \---header
| | head.html
| | header.html
| |
| +---styleguide
| | footer.html
| | header.html
| | index.html
| | layout.html
| |
| \---templates
| home.html
|
\---src
| index.pug
|
+---data
| | styleguide.json
| |
| \---temp
| data.json
|
+---img
| \---favicon
| | apple-touch-icon-57x57.png
| | apple-touch-icon-72x72.png
| | apple-touch-icon-114x114.png
| | apple-touch-icon-120x120.png
| | apple-touch-icon-144x144.png
| | apple-touch-icon-152x152.png
| | favicon-16x16.png
| | favicon-32x32.png
| | favicon.ico
| | mstile-144x144.png
|
+---js
| \---app
| +---core
| | @cookies.js
| | @outlineAccessibility.js
| | @preloader.js
| | @scrollToElement.js
| | @urlExternalSafe.js
| |
| \---general
+---scss
| | global.scss
| | styleguide.scss
| |
| +---abstracts
| | _functions.scss
| | _mixins.scss
| | _placeholders-includes.scss
| | _placeholders.scss
| | _variables.scss
| |
| +---base
| | _reset.scss
| | _typography.scss
| |
| +---layout
| | _buttons.scss
| | _fonts.scss
| | _footer.scss
| | _general.scss
| | _header.scss
| | _utils.scss
| |
| \---styleguide
| _styleguide.scss
|
\---views
+---modules
+---skeleton
| | layout.pug
| |
| +---footer
| | footer.pug
| | scripts.pug
| |
| \---header
| head.pug
| header.pug
|
+---styleguide
| | footer.pug
| | header.pug
| | index.pug
| | layout.pug
| |
| \---modules
\---templates
home.pugNotes
- Doesn't support Internet Explorer
- gulp-cli must be v2.30+
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
