https://github.com/ecadagiani/boilerplate-basic-web
A basic template for web project. With Gulp and nginx who allow to create a website with sass, handlebars, next-gen and import javascript.
https://github.com/ecadagiani/boilerplate-basic-web
babel docker gulp handlebars html javascript rollup sass web
Last synced: 2 months ago
JSON representation
A basic template for web project. With Gulp and nginx who allow to create a website with sass, handlebars, next-gen and import javascript.
- Host: GitHub
- URL: https://github.com/ecadagiani/boilerplate-basic-web
- Owner: ecadagiani
- License: mit
- Created: 2021-04-17T15:44:56.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-25T14:49:00.000Z (about 5 years ago)
- Last Synced: 2025-03-25T08:16:28.009Z (about 1 year ago)
- Topics: babel, docker, gulp, handlebars, html, javascript, rollup, sass, web
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Basic-Web-Template
## Require:
- Docker and docker-compose [https://docs.docker.com/get-docker/]()
- Node and npm [https://nodejs.org/en/download/]()
- Gulp [https://gulpjs.com/docs/en/getting-started/quick-start]()
## Quick Start
First use: run `npm i`
To start: run `npm start` and open [http://localhost:8080/]()
To build: run `npm run build`
To stop: run `npm run stop`
## Features
### Handlebars HTML
The HTML build use handlebar [https://handlebarsjs.com/](), you can put your data in `data.json`,
add some helpers functions in `handlebarHelpers.js`, and your partials in the folder `src/partials`.
### SASS
This template use dart-sass [https://sass-lang.com/dart-sass]() to build css,
you can use all features and syntax (ex: `@use foo`). Use relative path `my/path/toStyle`.
### Javascript
The template build an minified javascript with Babel and rollup. You can use all the recent syntax, and import files.
Use relative path like: `import data from "./my/path/data.js";`. You can import json too.
### Assets responsive
You can resize the pictures (jpg, jpeg, png) in folder `src/assets/images`, just update the file `imagesResizeConfig.json`.
Here: [https://www.npmjs.com/package/gulp-responsive]() you can have access to the documentation of the config.
## QA
### How to change port ?
In docker-compose.yml change l. 8 the default port (8080)
### Why there is an index.es.min.js and an index.iife.min.js ?
Because all the browser cannot execute the same level of JS technologies (ex: ES2015).
This template create two types of script: one lighter for the most recent browser,
and a heavier one for older browsers. When you develop your app only the index.es.min.js is updated.
Before sending your site to production, think about doing a build (`npm run build`).