I'd suggest replacing gulp with makefiles, kinda the 'vanilla js' option of task runners (but I am somewhat biased here, given I actually do workshops on it ;)). Bower is definitely on the way out so anything you're loading with Bower should probably shift to NPM (or an NPM overlay like Yarn).
VanillaJS is still the most enduring option to learn, but if you're wondering about frameworks there's little doubt that React is ruling the roost; with Vue nipping at its heels (surveys back this up). You should at least learn some basic React-as-in-just-React-that-renders-views, even if only to decide if you want to be using it.
One thing I'd say from the way you phrased the question - be really clear about what each piece is doing for you. A lot of JS tooling confusion and fatigue happens because people aren't sure what is meant to be doing what.
So you have:
On the plus side, you can use vanilla js through quite a few of those layers. So it's still an absolute go-to skill.
Several of these tools also do something else, usually not very well. eg. Webpack and NPM both have some capability as task runners, but it's not their core function and it shows.
npm and vanilla JS are still relevant. Bower and gulp are used far less these days for new projects, but many jobs are still going to require them.
Frameworks are useful to learn - they help to consolidate best practices and still provide a significant leg up so that you can get work done quickly. They provide ready abstractions that even more experienced developers appreciate as helpful. Anyone can write poorly performing or unmaintainable code with or without frameworks, so it's more about learning how the framework operates and researching best practices rather than avoiding them altogether.
React (more of a library) and Angular are dominant and likely to stick around for a while. Learning one or both of these is going to keep your skills relevant and let you code efficiently, regardless of your opinion of them individually. Both will help you write SPAs that can be maintained for more than a couple of pages or forms. Vue.js is a fast up and comer.
Understanding how to use a bundler like Webpack or Parcel is vital to the modern web. They streamline the process packaging your JS, CSS and other web artifacts by providing a plugin architecture for transpilation, removing dead code, minifying it and preparing it for web distribution. Any non-trivial application will benefit from it in the long run. With webpack, you can just include an npm module and it will be linked into your application from it's main entry point far easier than bower.
You can avoid dealing with bundlers directly by using templates or tightly maintained generators for react (create-react-app) or angular, but at some point you will need to understand how they work and how their plugin architectures operate. Webpack has an excellent manual these days and is well maintained compared to gulp, so it's worth taking a look and attempting to build up a config yourself (if only to learn). Be careful when referring to older tutorials, as it's architecture has changed significantly between v1 and v2/3 and many early issues around 3rd party plugins have long been addressed.
SaSS is still not a bad CSS transpiler - there are other options (particularly for working with React) but there is nothing wrong with raw CSS. There is no silver bullet, and it all comes down to structuring your CSS correctly, using conventions, and being prepared to refactor it proactively as new requirements or technical debt emerges. Bundlers like Webpack can make it easier to link and minify CSS into your application and provide auto-reloading during development.
Babel is a nice to have, especially when targeting older browser but using the latest ES6 or ES7 syntax. It plugs into webpack very easily.
You may also consider Typescript or Flow or Reason if you want to improve the safety and reliability of your code, and pick up more errors at development time. Typescript has the best overall support at the moment.
Eslint is the de-facto linter without these frameworks (and is recommended if you choose to write raw JS) and can still be excellent (albeit difficult to configure). Always start with a less restrictive configuration (such as eslint:recommended) and add rules as you go - there are defaults from airbnb and google, but you often spend too much time trying to match their strictly enforced code style instead of writing readable code. You won't need more than a half a dozen extra rules beyond this.
HTML, CSS and a normal flat text editor.
Anything more -- like the mouth-breathingly idiotic halfwit dumbass BULL that are "frameworks", or the train wreck laundry list of how NOT to use CSS that are "pre-processors" -- amounts to little more than nube predator scam-bait and/or just plain ignorant of how to use ANY of the front-end web technologies properly.
Anyone telling you otherwise likely doesn't know enough about HTML, CSS, or JavaScript to be flapping their yap on the topic!
Though to be fair, I say the same thing about Gulp. Garbage like that? It's nothing more than going full pakled.
You never go FULL pakled.
I also use sass. Not sure if that's in decline.
Francisco M. Santana Verona
Freelance web development
I would suggest you to start learning Webpack and get better at npm and maybe yarn. Bower is getting deprecated as time goes along with Gulp.