关于前端的开发的纠结

Question

关于前端我最近一直很纠结
我学了很多工具，电脑上也装了很多。
什么node,grunt,gulp,bower，git,vagrant机子上都有。
包管理工具，自动化工具，版本控制，环境搭建。
就是不知道怎么把这些工具能协作工作起来。
最近用bootstrap给一个网站做html,我还是用原来的办法。
在官方下了bootstsrap的css和js,然后打开编辑软件atom或者brackets,新建一个文件夹，然后建个index.html 把bootstrap 的css 和 js插进去。
然后在写html。需要用jquery的效果了，再到网上去找资源。然后把需要效果的html,cs,js 下载下来放到相应的目录，在html插入。这样做总觉得不方便，再说好像也不太科学，一个index.html再下来用了几个jquery效果，结果js和css就插了一堆。
我想大家开发前端应该不是这样的吧？希望有人能解答我的疑惑，最好能详细说明，关键是科学快捷专业开发web实例的步骤。

网上我搜了，基本解决不了我的疑惑。一堆复制的文章，好多都是介绍和讲解工具的使用方法或者介绍什么技术之类的文章。
类似：前端开发就是把ps转化成html 代码，然后加入JS效果，优化代码，最后测试发布。这样回复也不要了。谢谢大家！

小弟弟真心求一个