Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/errec/web-learning-kit-generator
Web Learning Kit Generator is a tool designed for beginners who want to build static websites with minimal configuration.
https://github.com/errec/web-learning-kit-generator
boilerplate development-environment gulp html jade javascript local-development pug sass scss task-runner typescript webkit
Last synced: 1 day ago
JSON representation
Web Learning Kit Generator is a tool designed for beginners who want to build static websites with minimal configuration.
- Host: GitHub
- URL: https://github.com/errec/web-learning-kit-generator
- Owner: Errec
- Created: 2016-10-31T14:11:26.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-08-20T21:13:07.000Z (5 months ago)
- Last Synced: 2025-01-20T07:06:23.252Z (1 day ago)
- Topics: boilerplate, development-environment, gulp, html, jade, javascript, local-development, pug, sass, scss, task-runner, typescript, webkit
- Language: TypeScript
- Homepage:
- Size: 569 KB
- Stars: 99
- Watchers: 8
- Forks: 31
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Learning Kit Generator
| Web Learning Kit Generator is a tool designed for beginners who want to build static websites with minimal configuration. The application creates a Gulp build process dynamically based on the user's choice of markup language (HTML/Pug), stylesheet language (SASS/SCSS), and scripting language (Javascript/Typescript). It's an easy and fast way to get started with a more realistic development environment on your local machine, beyond online IDEs. |  |
|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------:|
This project is based on a simple and fast workflow focused mainly on the front-end task. It gives a solid starting point for newcomers who wants a ready-to-deploy local environment setup. The sources used to build this project includes:
* [H5BP Project](https://github.com/h5bp/html5-boilerplate)
* [React Redux Starter Kit](https://github.com/davezuko/react-redux-starter-kit)
* [Mark Goodyear's Blog](https://markgoodyear.com/2014/01/getting-started-with-gulp/)
* [Web Starter Kit](https://github.com/google/web-starter-kit)
## Features
* Dynamic Configuration: Choose your preferred markup (**Pug/HTML**), stylesheet (**Sass/SCSS/CSS**), and script (**JavaScript/TypeScript**) languages, and the tool will generate a customized Gulpfile for you.
* Beginner-Friendly: Ideal for those new to web development who want to experiment with real-world tools and workflows.
* Extensible: Start simple, and gradually explore more advanced features as you become comfortable.
* Minimal Setup: Get up and running quickly without the need for complex configuration.
* Realistic Environment: Experience coding outside of online IDEs, and start using Git or other tools as you grow your skills.
* Bonus: you can add **Josh Comeau** css reset and **Necolas** css normalize
## Prerequisites
Before you begin, ensure you have the following installed on your system:
* Node.js (v14 or later)
* **npm** (comes with Node.js) or **Yarn**
## Getting Started
### 1 - Clone or download this repository
### 2 - Install dependencies:
Using npm:
```bash
npm install
```
Or using Yarn:
```bash
yarn install
```
## Usage
### Development
To start the development server with live reloading:
```bash
yarn start
```
Or
```bash
npm start
```
This will run the `gulp` command, which starts a local server and watches for file changes.
### Production Build
To create a production-ready build:
```bash
yarn build
```
Or
```bash
npm build
```
This will generate optimized files in the `dist` directory.
### Running Your Local Server With Gulp
This task will open the browser window usually with the URL http://localhost:3000/. Any saved changes made to the project files, will reflect automatically over the browser.
## Project Structure
```
.
├── src/ # ** Your code folder! **
│ ├── img/ # Image files
│ ├── js/ # JS/TS files
│ ├── styles/ # Sass/SCSS files
│ └── templates/ # Pug/HTML files
│
├── _gulp/ # Gulp configuration and tasks
├── dist/ # Production build output
├── gulpfile.js # Gulp entry point
├── package.json # Project dependencies and scripts
└── README.md # Project documentation
```
The src/ directory is created after the Yarn or npm install, **this is where your code journey begins**. The dist/ and build/ folders can be used to host your web project in a simple and convenient way. there are a lot of options to host it, including **Github Pages**
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is open source and available under the [MIT License](LICENSE).
---
For more detailed information about the gulp tasks and project configuration, please refer to the comments in the `gulpfile.js` and the files in the `_gulp` directory.