关于前端的开发的纠结

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效果，优化代码，最后测试发布。这样回复也不要了。谢谢大家！

小弟弟真心求一个

Answer 1

我觉着上面的答案，都解决不了题主的困惑。

题主主要纠结的是如何把这些工具协作起来，实现前端自动化。

先说下自动化之前的工作场景：

1. 新建项目A文件夹，再在A文件夹里创建html、css、js、images所需的各个文件夹
2. 将要用到的css文件(例如：reset.css，bootstrap等)，js文件(例如：Jquery，各种插件等)从以前的项目拷贝到当前项目中
3. 准备的差不多了，开始切图。写代码，浏览器刷新看效果，改代码，浏览器刷新看效果，再改代码，再刷新。。。。。
4. 如果在项目中用到 Less 或者 Sass，时不时的还需要将它们编译成css看效果
5. 需要用到新插件的话，google一下，找到下载，按照文档说明拷贝到对应目录
6. 切图完成之后。还要压缩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..,我都没看过。。

别慌，慢慢来，加油！！

Answer 2

前端有些东西可以用现成的代码搭建的, 有些是不能的.

可以复用工具快速完成的:

• 包管理工具, 比如 npm, Bower
• 项目脚手架, 比如 gulp, webpack
• 基础类库, 比如 jQuery, React, Angular, Vue
• 基本样式和组件, 比如 Bootstrap, material-ui

不好复用的:

• 具体的界面组件
• 项目当中具体的代码逻辑

当然还有一些比较模糊的, MVC 当中有一些逻辑也可以重用, 看经验跟能力了.

然后我的话会有一个脚手架, 可以看这里:
https://github.com/mvc-works/webpack-workflow
大概就是 HTML 模板, 调试和上线的脚本, 这些. 打开就有空白页面可以编写.

Answer 3

ExtJS，基本用了这个，你不用在去找其他东西了。
不然现在就没有一个东西可以满足你所有的要求。
不过怎么说呢，目前nodejs+gulp+bower基本可以解决大部分的问题。

Answer 4

需要效果当然是自己先写啊，写不出来才去网上寻求帮助，寻求帮助也不是把他们的html+css+js下载下来插进页面，先看人家的代码，理解了之后自己写出来。至于grunt,gulp这些都只是工具，你不用也照样做前端，这是效率低一些罢了。
先学会走路，在学跑吧

Answer 5

我懂题主的苦 前端开发目前还停留在ps到页面 到动态效果的苦
前端如何开发呢 不如看看app开发流程 你们什么时候看过app开发有前端 ios android两大阵营都已实现组件化 都是mvvm化 web组件化也开始出现
题主所说的jquery插件模式是现在绝大部分开发的模式 bootstrap不是 他是产品 设计 程序交流的结果

Answer 6

学得多是好的，但是想学得多了，就不用工作了，就不现实了，除非你做了管理，让别人去写代码。

如果你想减少工作量

1、用建站系统建站。
2、用框架开发
3、使用第三方库
4、利用好以前写的代码

Answer 7

先学好基础javascript,html,css
再去看jQuery的用法
然后才是各种工具包

没有基础的东西，学了一堆，也不知道个所以然，只知道这么用就这么用....

基础是王道~~~

Answer 8

只需要真正理解一个东西：CommonJS中的依赖管理是如何设计的。

接着只需要学会使用两个工具：
1，用npm管理项目依赖，理解npm与CommonJS的关系
2，用webpack把项目打包，理解webpack如何实现在前端项目也能使用CommonJS的依赖管理机制

最后再加上一条理念：尽量少自己写代码，哪怕就一行，能用npm提供的，就不要自己写

这样我猜就能满足你的"科学快捷专业"的要求了

Answer 9

http://yeoman.io/

Answer 10

感觉还是看得多写得少……
你用angular + gulp写个todoMVC出来就知道怎么协作了

还有你需要搞清楚每样技术解决的是什么问题，比如包管理解决了第三方模块的管理问题，这样的痛点你不可能没有体会，还有打包解决了资源合并问题，相比你用html插入就有性能上的优势

新技术层出不穷，不了解背后的需求是没办法融会贯通的

Answer 11

看着挺纠结，好好走路，别乱跑；

Answer 12

准备干管理吧，学那么多框框也没用，年龄上来也是over