关于前端我最近一直很纠结
我学了很多工具，电脑上也装了很多。
什么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效果，优化代码，最后测试发布。这样回复也不要了。谢谢大家！
小弟弟真心求一个
你不就是想要全自动吗，尤其是在初始化的时候，自己写个brow扩展或 shell脚本吧，说不定能火
其实我也想有脚本帮我把这些全干了，但是项目种类太多，没有统一的模板，所以估计只能每个项目来一遍了
我觉着上面的答案，都解决不了题主的困惑。
题主主要纠结的是如何把这些工具协作起来，实现前端自动化。
先说下自动化之前的工作场景：
- 新建项目A文件夹，再在A文件夹里创建html、css、js、images所需的各个文件夹
- 将要用到的css文件(例如：reset.css，bootstrap等)，js文件(例如：Jquery，各种插件等)从以前的项目拷贝到当前项目中
- 准备的差不多了，开始切图。写代码，浏览器刷新看效果，改代码，浏览器刷新看效果，再改代码，再刷新。。。。。
- 如果在项目中用到 Less 或者 Sass，时不时的还需要将它们编译成css看效果
- 需要用到新插件的话，google一下，找到下载，按照文档说明拷贝到对应目录
- 切图完成之后。还要压缩css、js、图片，混淆js，单元测试等等。
其实就是题主目前的工作形式。
总结上面的开发流程，主要是下面四点：
- 开发环境初始化
- 样式、脚本的依赖管理
- 文件编译、压缩合并、混淆
- 自动化测试 等等
解决之道
通过一些很好用的自动化工具，我们可以将上面的各个部分都自动化，只需敲几个命令就可以走完整个流程，并及时得到运行结果的反馈。
对应的自动化工具：
- 开发环境初始化-----------------yeoman
- 样式、脚本的依赖管理----------bower
- 文件编译、压缩合并、混淆-----grunt及其插件
- 自动化测试 等等----------------karma等
注意：上面针对每一部分只列举了一个自动化工具，其实还有很多替代选择。例如：你可以用gulp 代替grunt
动手操作
我假设题主已经安装了这些工具，并了解基本用法。就拿题主的讲的bootstrap的例子来说：
打开命令行：
mkdir myapp // 新建目录
cd myapp // 进入目录
yo //首先是通过yeoman 搭建开发目录
//按照提示，一步一步往下走
//命令执行完成后，会生成项目的目录结构
grunt serve //开启开发服务器
// 接下来，就是切图，写HTML，css 的时候了
// 不过不用刷新，grunt 会监测文件变化，自动刷新
//这时，假设需要一个前端库了，假设是jQuery
bower install jquery
//这就把jquery 安装到了bower_components 目录下，可以直接引用
//这时，假设需要一个nodejs 库，来优化开发流程
npm install XXX --save-dev
上面只是说了关于前端自动化的一些内容。至于其它的：例如
- 版本控制 ：git
- 项目模块化
- 虚拟机 vargrant
等等也都不是一时半会就能学会用好的。
能感觉出来，楼主的好学。但是，路真的是一步一步走出来的。像vargrant..,我都没看过。。
别慌，慢慢来，加油！！
先学好基础javascript,html,css
再去看jQuery的用法
然后才是各种工具包
没有基础的东西，学了一堆，也不知道个所以然，只知道这么用就这么用....
基础是王道~~~
http://yeoman.io/
看着挺纠结，好好走路，别乱跑；
准备干管理吧，学那么多框框也没用，年龄上来也是over
需要效果当然是自己先写啊，写不出来才去网上寻求帮助，寻求帮助也不是把他们的html+css+js下载下来插进页面，先看人家的代码，理解了之后自己写出来。至于grunt,gulp这些都只是工具，你不用也照样做前端，这是效率低一些罢了。
先学会走路，在学跑吧
前端有些东西可以用现成的代码搭建的, 有些是不能的.
可以复用工具快速完成的:
- 包管理工具, 比如 npm, Bower
- 项目脚手架, 比如 gulp, webpack
- 基础类库, 比如 jQuery, React, Angular, Vue
- 基本样式和组件, 比如 Bootstrap, material-ui
不好复用的:
- 具体的界面组件
- 项目当中具体的代码逻辑
当然还有一些比较模糊的, MVC 当中有一些逻辑也可以重用, 看经验跟能力了.
然后我的话会有一个脚手架, 可以看这里:
https://github.com/mvc-works/webpack-workflow
大概就是 HTML 模板, 调试和上线的脚本, 这些. 打开就有空白页面可以编写.
学得多是好的，但是想学得多了，就不用工作了，就不现实了，除非你做了管理，让别人去写代码。
如果你想减少工作量
1、用建站系统建站。
2、用框架开发
3、使用第三方库
4、利用好以前写的代码
我懂题主的苦 前端开发目前还停留在ps到页面 到动态效果的苦
前端如何开发呢 不如看看app开发流程 你们什么时候看过app开发有前端 ios android两大阵营都已实现组件化 都是mvvm化 web组件化也开始出现
题主所说的jquery插件模式是现在绝大部分开发的模式 bootstrap不是 他是产品 设计 程序交流的结果
只需要真正理解一个东西：CommonJS中的依赖管理是如何设计的。
接着只需要学会使用两个工具：
1，用npm管理项目依赖，理解npm与CommonJS的关系
2，用webpack把项目打包，理解webpack如何实现在前端项目也能使用CommonJS的依赖管理机制
最后再加上一条理念：尽量少自己写代码，哪怕就一行，能用npm提供的，就不要自己写
这样我猜就能满足你的"科学快捷专业"的要求了
感觉还是看得多写得少……
你用angular + gulp写个todoMVC出来就知道怎么协作了
还有你需要搞清楚每样技术解决的是什么问题，比如包管理解决了第三方模块的管理问题，这样的痛点你不可能没有体会，还有打包解决了资源合并问题，相比你用html插入就有性能上的优势
新技术层出不穷，不了解背后的需求是没办法融会贯通的
ExtJS，基本用了这个，你不用在去找其他东西了。
不然现在就没有一个东西可以满足你所有的要求。
不过怎么说呢，目前nodejs+gulp+bower基本可以解决大部分的问题。