diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..bc1aa5a
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,27 @@
+name: CI
+
+on:
+ push:
+ branches: ["main", "master"]
+ pull_request:
+
+jobs:
+ validate:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - name: Use Node.js 20
+ uses: actions/setup-node@v4
+ with:
+ node-version: 20
+
+ - name: Install dependencies
+ run: npm install
+
+ - name: Typecheck
+ run: npm run typecheck
+
+ - name: Tests
+ run: npm test
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..39a29f1
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,26 @@
+# Contributing
+
+Thanks for your interest in improving Web Learning Kit Generator.
+
+## Development setup
+
+1. Install dependencies:
+ - `npm install`
+2. Run checks:
+ - `npm run typecheck`
+ - `npm test`
+3. Run the interactive generator:
+ - `npm run init`
+
+## Contribution guidelines
+
+- Keep changes small and focused.
+- Prefer TypeScript-safe updates.
+- Add or update tests when behavior changes.
+- Update README/docs when UX or command flow changes.
+
+## Commit and PR guidance
+
+- Use clear, imperative commit messages.
+- Include a short summary of what changed and why.
+- Mention any behavior changes for generated projects.
diff --git a/README.md b/README.md
index a1ab00f..8f8f96b 100644
--- a/README.md
+++ b/README.md
@@ -1,117 +1,159 @@
-
-
-
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)
+# Web Learning Kit Generator
-## Features
+Web Learning Kit Generator helps beginners generate a **local, realistic front-end workflow** (not a browser sandbox) using Gulp, with interactive choices for:
+
+- Markup: **HTML** or **Pug**
+- Styles: **Sass** or **SCSS**
+- Scripts: **JavaScript** or **TypeScript**
- * 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.
+It is designed to teach how real projects are structured, built, and shipped from your own machine.
+
+---
- * Bonus: you can add **Josh Comeau** css reset and **Necolas** css normalize
+## Why this project exists
-## Prerequisites
+Most beginners start in online playgrounds and miss practical workflows such as:
-Before you begin, ensure you have the following installed on your system:
+- Local tooling setup
+- Build pipelines
+- Static asset optimization
+- Source organization
+- Deployment-ready `dist` outputs
-* Node.js (v14 or later)
-* **npm** (comes with Node.js) or **Yarn**
+This generator creates a beginner-friendly starting point while still exposing real-world build concepts.
-## Getting Started
+## Features
-After [Node.js](https://nodejs.org/en/download/), [npm](https://docs.npmjs.com/getting-started/installing-node), [Gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) and [Bower](https://bower.io/#install-bower)(optional) installation, you can create a new project based on `pug-sass-boilerplate-starter-kit` by doing the following:
+- **Interactive project bootstrap** for language/tool choices
+- **Generated Gulp pipeline** for styles, scripts, markup, and images
+- **Live reload dev server** via BrowserSync
+- **Production build output** in `dist/`
+- Optional CSS starter files:
+ - Josh Comeau-style reset
+ - Nicolas Gallagher normalize
-## Installation
+## Requirements
-### 1 - Clone or download this repository
+- Node.js 18+ (Node.js 20 recommended)
+- npm (or Yarn)
-### 2 - Install dependencies:
+## Quick start
-Using npm:
```bash
npm install
+npm run init
+npm start
```
-Or using Yarn:
+Build for production:
+
```bash
-yarn install
+npm run build
```
-## Usage
+Quality checks:
-### Development
+```bash
+npm run typecheck
+npm test
+```
-To start the development server with live reloading:
+## Project structure
-```bash
-gulp
+```text
+.
+├── src/ # Generated source files (created after npm run init)
+│ ├── img/ # Image assets
+│ ├── js|ts/ # Script entry and modules
+│ ├── sass|scss/ # Styling source
+│ └── html|pug/ # Markup source
+├── dist/ # Build output
+├── _gulp/ # Generator modules and task templates
+├── gulpfile.js # Generated Gulp pipeline
+└── README.md
```
-This will run the `gulp` command, which starts a local server and watches for file changes.
+## Current quality/devops baseline
-### Production Build
+This repository now includes:
-To create a production-ready build:
+- Type checking (`npm run typecheck`)
+- Unit tests for filesystem utilities (`npm test`)
+- CI workflow for typecheck + tests (GitHub Actions)
+- Contributing and security documentation
-```bash
-npm run build
-```
-or
-```bash
-yarn build
-```
+---
-This will generate optimized files in the `dist` directory.
+## Deep improvement roadmap
-### Running Your Local Server With Gulp
+If your goal is to make this starter more production-realistic for learners, implement the following in phases.
-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.
+### Phase 1 — Reliability and maintainability (short term)
-## Project Structure
+1. **Refactor generator templates into composable modules**
+ - Move generated gulpfile snippets into dedicated template files.
+ - Add snapshot tests for generated output.
+2. **Introduce a config schema**
+ - Validate user choices with a typed schema (e.g., Zod).
+3. **Error handling and UX improvements**
+ - Improve setup error messages and recovery paths.
+ - Add non-interactive flags for automation (`--script ts --style scss --markup pug`).
-```
-.
-├── 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**
+### Phase 2 — Security and supply chain
-## Contributing
+1. **Automated dependency security**
+ - Enable Dependabot/Renovate.
+ - Add `npm audit --audit-level=high` in CI (non-blocking at first).
+2. **Secure generated defaults**
+ - Include optional security headers guidance (CSP, X-Content-Type-Options) in deployment docs.
+3. **Harden build tooling**
+ - Pin and regularly review toolchain versions.
-Contributions are welcome! Please feel free to submit a Pull Request.
+### Phase 3 — Better learning outcomes for users
-## License
+1. **Preset modes**
+ - `beginner`, `intermediate`, `production-lite` presets.
+2. **Educational comments in generated files**
+ - Explain each Gulp task and where to customize.
+3. **Project recipes**
+ - Add examples: landing page, docs site, multi-page static site.
+
+### Phase 4 — DevOps and deployment excellence
+
+1. **Deployment templates**
+ - Add one-click workflows for GitHub Pages / Netlify / Vercel static output.
+2. **Release automation**
+ - Semantic versioning + changelog generation.
+3. **Performance checks**
+ - Add Lighthouse CI or static asset budget checks.
+
+### Phase 5 — Ecosystem growth
-This project is open source and available under the [MIT License](LICENSE).
+1. **Plugin architecture** for additional features (ESLint, Prettier, Vitest, Playwright)
+2. **CLI packaging** (`npx web-learning-kit-generator`)
+3. **Template marketplace** for community starter packs
---
-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.
\ No newline at end of file
+## Suggested next features (high impact)
+
+- Add generated **ESLint + Prettier** setup.
+- Add optional **testing scaffold** (Vitest + basic smoke tests).
+- Add generated `.editorconfig`, `.gitignore`, `.nvmrc`.
+- Add optional accessibility starter checks (axe/lint guidance).
+
+## Documentation
+
+- [Contributing guide](./CONTRIBUTING.md)
+- [Security policy](./SECURITY.md)
+
+## Inspiration
+
+- [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)
+
+## License
+
+MIT
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..ed3ee4c
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,26 @@
+# Security Policy
+
+## Supported Versions
+
+This project is currently maintained on the latest `main` branch.
+
+## Reporting a Vulnerability
+
+If you discover a security issue, please open a private security advisory in GitHub when possible.
+If that's not available, open an issue without exploit details and request a private follow-up channel.
+
+Please include:
+
+- A clear description of the impact.
+- Reproduction steps.
+- Suggested mitigations (if known).
+
+## Secure-by-default guidance for generated projects
+
+The generated boilerplate is a learning-focused starter and should be hardened before production use.
+At minimum:
+
+- Keep dependencies updated (`npm audit`, Dependabot/Renovate).
+- Add Content Security Policy headers at deployment time.
+- Review third-party scripts and assets.
+- Use environment-specific configuration and secret management.
diff --git a/_gulp/types/custom.d.ts b/_gulp/types/custom.d.ts
new file mode 100644
index 0000000..f7c8589
--- /dev/null
+++ b/_gulp/types/custom.d.ts
@@ -0,0 +1,7 @@
+declare module 'gulp-imagemin';
+declare module 'browserify';
+declare module 'gulp-rename';
+declare module 'gulp-uglify';
+declare module 'vinyl-buffer';
+declare module 'vinyl-source-stream';
+declare module 'gulp-plumber';
diff --git a/_gulp/utils/fileSystem.test.ts b/_gulp/utils/fileSystem.test.ts
new file mode 100644
index 0000000..ffd4af6
--- /dev/null
+++ b/_gulp/utils/fileSystem.test.ts
@@ -0,0 +1,49 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+ copyFile,
+ createDirectory,
+ deleteDirectory,
+ fileExists,
+ writeFile,
+} from './fileSystem';
+
+test('createDirectory/writeFile/fileExists/deleteDirectory lifecycle', () => {
+ const tmpRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'wlk-'));
+ const nestedDir = path.join(tmpRoot, 'src', 'sass');
+ const filePath = path.join(nestedDir, 'main.sass');
+
+ createDirectory(nestedDir);
+ writeFile(filePath, 'body\n color: #222');
+
+ assert.equal(fileExists(nestedDir), true);
+ assert.equal(fileExists(filePath), true);
+
+ deleteDirectory(path.join(tmpRoot, 'src'));
+ assert.equal(fileExists(path.join(tmpRoot, 'src')), false);
+
+ deleteDirectory(tmpRoot);
+});
+
+test('copyFile copies source content into destination path', () => {
+ const tmpRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'wlk-copy-'));
+ const sourceDir = path.join(tmpRoot, 'source');
+ const targetDir = path.join(tmpRoot, 'target');
+
+ createDirectory(sourceDir);
+ createDirectory(targetDir);
+
+ const sourceFile = path.join(sourceDir, 'normalize.scss');
+ const destFile = path.join(targetDir, '_normalize.scss');
+ const content = 'html { line-height: 1.15; }';
+
+ writeFile(sourceFile, content);
+ copyFile(sourceFile, destFile);
+
+ assert.equal(fs.readFileSync(destFile, 'utf8'), content);
+
+ deleteDirectory(tmpRoot);
+});
diff --git a/package.json b/package.json
index afef1a6..be4d24f 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,11 @@
"main": "gulpfile.js",
"type": "commonjs",
"scripts": {
- "postinstall": "ts-node _gulp/gulpSetup.ts",
+ "init": "ts-node _gulp/gulpSetup.ts",
"start": "NODE_OPTIONS=--no-deprecation gulp",
- "build": "NODE_OPTIONS=--no-deprecation gulp build"
+ "build": "NODE_OPTIONS=--no-deprecation gulp build",
+ "typecheck": "tsc --noEmit",
+ "test": "node --test -r ts-node/register _gulp/**/*.test.ts"
},
"author": "Raniro Coelho",
"license": "MIT",