Skip to content

Conversation

@likhitharajuri03
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant