Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update does a few important things to modernize the project and fix a small issue with the navigation bar.
Here’s what I changed:
Updated the build system to Gulp 4 (the old one was stuck on Gulp 3).
Switched from node-sass to Dart Sass, so it builds without any of those annoying native/node-gyp errors.
Removed the old request dependency and replaced it with a simple built-in HTTPS downloader.
Cleaned up the Sass files — replaced old/deprecated functions like lighten() and darken() with the new color.adjust, and fixed a few helper functions.
Added a small CI workflow so the build runs automatically on every push or PR.
Fixed the navigation bar accessibility issue (the one about adding navigation item #4) — it now has proper tags for Home, Products, About, and Contact.
Why this was needed
The project didn’t build properly on newer Node versions because:
Gulp was too old (version 3) and didn’t match what some plugins needed.
node-sass required native compilation, which breaks easily on different systems.
The navigation bar wasn’t using semantic HTML — it used s instead of links, so keyboard users or screen readers had trouble with it.
Upgrading to Gulp 4 and Dart Sass fixes those build issues and makes the code easier to maintain. The new navigation markup also makes the example page more accessible and user-friendly.
Files I updated
index.html
Changed the nav spans to proper links.
Added role="navigation" and aria-label for accessibility.
Added four items: Home, Products, About, Contact.
_nav.scss
Added hover and focus styles for better keyboard support.
package.json
Updated to:
gulp → ^4.0.2
gulp-sass → ^5.1.0
Added sass (Dart Sass)
Cleaned up a few dependencies that were outdated.
gulpfile.js
Rewrote it completely to work with Gulp 4 syntax (series, parallel, etc.).
Replaced request with a simple https download helper.
Tasks now include: downNormalize, downTip, clean, sassTask, cssMin, lintCssTask, watch.
Sass files (_color.scss, _form.scss, _table.scss, _fonts.scss, main.scss)
Replaced old color and math functions with new Sass module versions.
Fixed a small typo in one variable name ($base_color → $base-color).
.github/workflows/ci.yml
Added a basic CI workflow that installs and builds automatically.
How I tested it
Installed everything fresh with npm ci and ran npx gulp (tested on Windows PowerShell).
→ Build completed successfully, no errors.
Checked that css/ and min/wmin.css were generated correctly.
Opened index.html and made sure all four nav links are visible, clickable, and focusable with the keyboard.
CI also runs automatically now, so future PRs will get checked too.
Notes
The build works fine now, but Sass still shows some warnings because of the old @import syntax. It doesn’t break anything — just warnings.
In the next update, we can switch everything to the new @use / @forward syntax to fully modernize it.
I focused this PR just on the Gulp/Dart Sass migration and accessibility fix to keep it simple and reviewable.
How to test for reviewers
Run:
npm ci
npx gulp
You should see the build finish without errors.
Open index.html in a browser.
Check that there are four nav items: Home, Products, About, Contact.
Make sure you can tab through them with the keyboard.
CI should pass automatically on GitHub.
Rollback info
If we ever need to undo this, you can revert:
gulpfile.js and package.json (to go back to Gulp 3 + node-sass)
index.html and _nav.scss (to revert the nav changes)
PR title
chore(build): migrate to Gulp 4, switch to Dart Sass & fix navigation accessibility
Release note
Updated the build system to Gulp 4 and Dart Sass to fix build issues on newer Node versions.
Also made the navigation bar semantic and keyboard-accessible.