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:
- Task runners (grunt, gulp, make) - they just automate commands. Any of them will do. I still have a Grunt project running at work, it's not like it suddenly ceases to exist because something else came out ;)
- Package managers (npm, bower, yarn) - they retrieve code for you. That's really all they do. They go to a git reference and pull the code down. I swear people seem to think they have magical powers and they're just abstracted source control.
- JavaScript bunders (webpack, browserify) - specialised bundle concatenation tool for JS apps. Their fans will argue this point, but I don't think they should be used for anything else.
- Pre- and post-processors, transpilers (SCSS, postcss, babel) - they take your source code and output something else. I think it's a good idea to have all your JS processed from ES6 and your CSS prefixed automatically, that lets you write modern, clean code and worry less about which precise features work just now.
- Frameworks, libraries (React, etc) - should in theory save you time and effort, while increasing quality. Actual results may vary. Follow directions and see your doctor if pain persists ;)
- Your own code - having assembled everything else you finally write some actual code ;) The though experiment everyone should do is: what's the absolute minimum amount of other stuff I can use to do this bit? Your own code should be the focus, after all!
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.