前端初学者该如何理解与学习glup，webpack等工具？

Question

我是一名前端初学者，只是会html，css，js，jq，现在在学es6为了后面学vue.js做铺垫，但是现在看到很多人用vue.js做开发都用到了webpack，glup，npm等工具，npm我知道就像是php里面的composer一样。但是其他的这些工具我不是很懂。

我也试着读过文档，看过网上各种所谓的xx小时包教包会入门教程，还是对他们不是特别理解，请问是不是我学习路线有问题？还是我的理解有问题？求大牛们分享分享你们对于各种前端工程化工具得理解和认识，感激不尽。

Answer 1

首先学会拼写Gulp

Answer 2

如果你想学vue，还是配合学习webpack比较合适，至于别人的文章看不懂，可能就是还没有入门吧，先搞明白为什么需要构建工具应该会有利于你的学习的

http://www.jianshu.com/p/42e1...

Answer 3

看官方文档，按照demo自己去操作，遇到疑惑的地方去debug，弄清楚原理。多练，多debug源码看细节，没有捷径。

Answer 4

教程第一次看不懂，你可以看第二次，第三次。你每次去看吸取的东西又不一样，当然不要忽视官方文档的重要性

Answer 5

webpack与glup是差不多的东西主要是用来对你开发的代码做处理编译用的，你可以理解为这两个是两个不同型号的机器，这两个机器里面一开始什么都没有只有一个外壳，但是预留了位置可以让我们装上sass，less，babel，uglify等各种处理代码和文件用的组件，npm的话可以看做是一个免费的五金商店（实际上是在线的node组件库），通过npm install命令把你需要的组件买下来，然后用gulp-less或者是less-loader这些不同型号的螺栓（螺栓别忘了从五金商店买）把你的组件装进各自的机器，然后开动机器把你的项目源代码放进去，then 开动机器！嘎啦嘎啦~~ 你的半成品代码就会在机器里面被各种组件加工，最后变成成品代码出来。具体怎么组装机器完成整个生产线，我只能说看说明书（教程，文档）多写demo代码，多看一下网上成熟的demo钻研一下。其实如果只是想学vue或者是react的话你只要会基本配置就好了，确保你的代码能够被正确处理就行。

Answer 6

推荐阮一峰的webpack教程 https://github.com/ruanyf/web...
跟着一个个做下来，再看看官方文档就可以自己配置了

Answer 7

要不你就这样理解：

JSX, .vue打包成 vanilla JS 的过程类似于 C/C++ 编译成静态库或者可执行文件，Webpack 之类的工具类似 make 或者 cmake。
只不过在C/C++中是 script to binary, JavaScript这边是script to script。

（当然实际上在细节方面是有很大差别的，只是一个比方。）