development stack for vanilla webpage (taskrunner, tests, linter etc.)

TL;DR: Describe your tools and process for making webpages, and what do you recommend for modern vanilla webdev.

Context

Recently I've been doing some work on a legacy website that consist of mostly static HTML, CSS and some JS for interactivity. On the dev side I'm using HTML+CSS+JS, npm for some development tools (gulp and it's plugins) and git for versioning.

In the prehistoric era the whole process was mostly manual - edit html, css, upload to the server and voila — that's basically what I'm doing right now. Nowadays there are billions of frameworks and tools to help with development. I want to leverage them and streamline my development process a bit, making it more professional but also keep the amount of work on a bare minimum.

For later reference, here is my current workspace:

dist/             # minified etc. webpage ready to be uploaded to server
src/              # website sources
 legacy           # legacy website, not to be touched
 calculator/      # I've been working on this
   calc.html
   calc.js
   calc.css
test/             # empty for now
gulpfile.js       # tasks
...               # node specific files like node_modules, gulp package and other dev-deps.

The legacy stuff is not important. I've modified and modernized the calculator — (basically interactive <form> calculating costs, with vanilla JS logic in calc.js and one external QRcode generator library from cdnjs.com). Everything is super simple, even to the point that the only library I use is some QR code generator from cdnjs.com.

I'm the sole dev that works on this project now, and my task was to modernize the calculator/, (in which I mostly succeeded), but I know I am missing on many things, and I want to up my game a bit.

To the point.

There are several questions that seem like they should go into separate threads, but they are all interconnected, and I think it's good to have them all in one place:

1. What's needed to make calculator/ work offline (it uses HTML+JS+one remote script from cdnjs.com)?
   • React, Vue, Angular - I don't want any heavy library, so I don't think those are adequate, nor do I want to learn something that heavy now - what's present now works already, now I just want to make it work online
   • Is the webpage like that considered a "web app" at hits point?
   • Should I look into PWA or is there something else?
2. Which tools to use for static analysis?
   • I know about ESLint, but what about checking whole webpages
3. Which tools for running tasks?
   • I know about gulp (the one I use now) and grunt
   • In Java/Kotlin, for example, Gradle takes care of those things
4. What technology for testing/mocking/profiling?
   • I've heard about Mocha, Jest, Selenium, Cypress - what should I use? Are there other, better alternatives?
   • I just want to make some tests like "user inputs 7 -> cost should be 12"
5. How to structure a project like that together with dev environment?
6. What VSCode addons to use?
7. Am I forgetting about something in the process? (aside github actions, because I know how to do that part with CD)

Why do I bother with all of this? Well, the owner of the project is a "tinkering" type of guy that can code just a little bit, but manages on his own with simple things, so I want to keep the codebase as vanilla as possible, but also secure it against him accidentally breaking it — that's why I want to add linter tasks, tests, task runners for minifying and obfuscating.