relationship between webpack, npm, bower, gulp

I have recently just went in web-development and heard about these tools, I still confusing about it even I done research after, and also I have some questions as well. this is the following research I have done if there are something wrong please correct me.

1. Webpack is replacing bower and gulp Bower is use to manage front end lib(eg: bootstrap), which gulp was use to manage backend lib(eg: backbone.js )

2. In some big project people still use gulp because give more control to the project. npm is the package manager for JavaScript. If I want to I can install bootstrap from either npm or bower or gulp. People choose to use bower and not just npm to install bootstrap is because npm does nested dependency tree, which Bower requires a flat dependency tree, which means faster.

3. Webpack replacing bower and gulp is because those are overkilling peoples time.
4. The last thing is a question, I saw on youtube people download sass(which I understand is a front end tool)eg:(npm install gulp-sass --save-dev) in gulp and then not using bower, is that even the right way to do things? because if yes why do we still need to use bower?