nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识
知识点涉及怎么结合gulp、webpack、Babel等并结合NodeJS+NPM开发前端。javascript
第一章:开脑与热身php
为何须要前端工程化？
前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代，近年来不少相关的工具和概念诞生。好奇心日报在进行前端工程化的过程当中，主要的挑战在于解决以下问题：
✦ 如何管理多个项目的前端代码？
✦ 如何同步修改复用代码？
✦ 如何让开发体验更爽？java
项目实在太多
以前写过一篇博文 如何管理被多个项目引用的通用项目？，文中提到过某某的项目偏多（PC/Mobile/App/Pad），要为这么多项目开发前端组件并维护是一个繁琐的工做，而且会有不少冗余的工做。node
更好的管理前端代码
前端代码要适配后台目录的规范，原本能够很美好的前端目录结构被拆得四分五裂，前端代码分散不便于管理，而且开发体验很不友好。
而有了前端工程化的概念，前端项目和后台项目能够完全分离，前端按本身想要的目录结构组织代码， 而后按照必定的方式构建输出到后台项目中，简直完美（是否是有种后宫佳丽三千的感受）。react
技术选型
调研了市场主流的构建工具，其中包括gulp、webpack、fis，最后决定围绕gulp打造前端工程化方案，同时引入webpack来管理模块化代码，大体分工以下：gulp：处理html压缩/预处理/条件编译，图片压缩，精灵图自动合并等任务webpack：管理模块化，构建js/css。jquery
至于为何选择gulp & webpack，主要缘由在于gulp相对来讲更灵活，能够作更多的定制化任务，而webpack在模块化方案实在太优秀（不由自主的赞美）。
怎么设计前端项目目录结构？
抽离出来的前端项目目录结构以下
appfe目录：appfe就是前面提到的前端项目，这个项目主要包含两部分：前端代码、构建任务appfe > gulp目录：包含了全部的gulp子任务，每一个子任务包含相关任务的全部逻辑。appfe > src目录：包含了全部前端代码，好比页面、组件、图片、字体文件等等。appfe > package.json：这个不用说了吧。appfe > gulpfile.js：gulp入口文件，引入了全部的gulp子任务。
理想很丰满，现实却很骨感，这么美好的愿望，在具体实践过程当中，注定要花很多心思，要踩很多坑。
好奇心日报此次升级改造即将上线，终于也有时间把以前零零碎碎的博文整合在一块儿，而且结合本身的体会分享给你们，固然将来可能还会有较大的调整，这儿抛砖引玉，你们能够参考思路。
gulp 是什么？
gulp是一个基于流的构建工具，相对其余构件工具来讲，更简洁更高效。
Tip：以前写过一篇gulp 入门，能够参考下，若是对gulp已经有必定的了解请直接跳过。
webpack 是什么？
webpack是模块化管理的工具，使用webpack可实现模块按需加载，模块预处理，模块打包等功能。
Tip：以前写过一篇webpack 入门，能够参考下，若是对webpack已经有必定的了解请直接跳过。
如何整合gulp & webpack
如今webpack明显呈愈来愈受欢迎的趋势，而gulp在当年的jquery时代的时候也是发挥了重要做用。他们均可以看作是构建工具的一种，构建工具的目的是实现构建过程的自动化。他们都是node工具包，能够经过npm全局安装到本地计算机。
Gulp是任务运行工具，好比，经常使用命令有：gulp.task()，Webpack不是任务运行工具， Webpack是一个模块构建工具。主要目的是帮助程序模块及其依赖构建静态资源。因此，gulp在jQuery时代堪称完美，而对于SPA大型单页应用来讲，webpack的模块化很好地解决了这个问题。
gulp 走的是流式处理路线，webpack 走的是模块处理路线，可是二者所要达成的目标倒是同样的，那就是促进前端领域的自动化和工程化管理。
webpack是众多gulp子任务中比较复杂的部分，主要对JS/CSS进行相关处理。
包括：模块分析、按需加载、JS代码压缩合并、抽离公共模块、SourceMap、PostCSS、CSS代码压缩等等...
使用node构建环境(webpack,gulp)
关键点
其中关键点是npm script中运行的代码是优先本目录中的模块，即运行webpack,gulp需要全局安装的模块时，如今只用安装在本项目内即可以运行
代码
-
package.json
-
-
{
-
...
-
scripts: {
-
"dev": "webpack",
-
"build": "gulp"
-
}
-
-
...
-
}
-
使用（交付后端）
只需要把整个本地项目所有复制给后端人员，并在后端开发机上安装node.js环境便可以正常运行
- 运行代码
-
npm run dev
-
npm run build
nodejs，npm，gulp，webpack的介绍和关系
nodejs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。让JavaScript运行在服务端的开放平台，它让JavaScript成为PHP，Python，Ruby等服务器端语言分庭抗礼的脚本语言。（安装的时候注意设置环境变量）
npm
npm是nodejs的一个模块，是nodejs的包管理器。
咱们在Node.js上开发时，会用到不少别人已经写好的javascript代码，若是每当咱们须要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会很是麻烦。因而就出现了包管理器npm。你们把本身写好的源码上传到npm官网上，若是要用某个或某些个，直接经过npm安装就能够了，不用管那个源码在哪里。而且若是咱们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把全部依赖的包都下载下来而且管理起来。试想若是这些工做全靠咱们本身去完成会多么麻烦！
市场上还有不少经常使用的第三方工具，cnpm，yarn，bower
gulp
Gulp就是为了规范前端开发流程，实现先后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的基于流一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上咱们能够对产品进行管理。”
Gulp是经过task对整个开发过程进行构建。
1.构建工具
2.自动化
3.提升效率用
webpack
Webpack 是当下最热门的基于配置的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
1.打包工具
2.模块化识别
3.编译模块代码方案用
gulp和webpack都是基于node.js的工具
总结
1.jquery依然依靠丰富的dom操做去组合业务逻辑，当业务逻辑复杂的时候，每行代码都会有不知所云的感受。由于:
- 第一：业务逻辑和UI更改该混在一块儿，
- 第二：UI里面还参杂这交互逻辑，让原本混乱的逻辑更加混乱。
固然第二点从另外一方面看也是优势，由于有的时候UI交互逻辑可以更加灵活地嵌入到业务逻辑，这在其余MV*框架中都是比较难处理的。
2.vuejs很是小清新，小清新不表明作不了复杂的东西，好比官方的这个demo就不错：http://vuejs.org/examples/svg.html
3.reactjs代码量最多，由于它既要管理UI逻辑，又要操心dom的渲染。
4.extjs无感 没用过。
5.angularjs渲染快，就是量大（相对于vue.js）。
前端工程化能够自动化处理一些繁复的工做，提升开发效率，减小低级错误。
更重要的是，仍是文章开头的说的，前端工程化最大的意义在于给咱们新的视角去看待前端开发，让前端开发能够作更复杂、更有挑战的事情！
【参考文章】
一、前端三大主流框架的对比React、Vue、Angular - 简书 https://www.jianshu.com/p/c4005414025c
二、node.js+npm+vue+webpack+nginx前端项目打包部署到服务器 - https://blog.csdn.net/qq_35813265/article/details/81872351
三、nodejs与nginx的完美搭配 - https://blog.csdn.net/qq_17475155/article/details/66473855
四、用Nginx作NodeJS应用的负载均衡 - https://blog.csdn.net/chszs/article/details/43203127
五、使用pm2躺着实现负载均衡 - https://blog.csdn.net/qq_17475155/article/details/53823862