nodejs+gulp+webpack基础知识

谁践踏了优雅 2023-06-04 02:46 5阅读 0赞

# nodejs+gulp+webpack基础知识 #

2019年08月22日 11:49:40 [天府云创][Link 1] 阅读数 22

本文链接： [https://blog.csdn.net/English0523/article/details/100009783][https_blog.csdn.net_English0523_article_details_100009783]

知识点涉及怎么结合gulp、webpack、Babel等并结合NodeJS+NPM开发前端。

[第一章:开脑与热身][Link 2]

[第二章:gulp和webpack混合学习][Link 2]

[第三章:前端利器Babel+ES2015体验学习篇][Link 2]

[第四章:webpack+gulp+sass学习篇][Link 2]

[第五章:webpack+git+Jenkins学习篇][Link 2]

### 为什么需要前端工程化？ ###

前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代，近年来很多相关的工具和概念诞生。好奇心日报在进行前端工程化的过程中，主要的挑战在于解决如下问题：  
✦ 如何管理多个项目的前端代码？  
✦ 如何同步修改复用代码？  
✦ 如何让开发体验更爽？

### 项目实在太多 ###

之前写过一篇博文 [如何管理被多个项目引用的通用项目？][Link 3]，文中提到过某某的项目偏多（PC/Mobile/App/Pad），要为这么多项目开发前端组件并维护是一个繁琐的工作，并且会有很多冗余的工作。

### 更好的管理前端代码 ###

前端代码要适配后台目录的规范，本来可以很美好的前端目录结构被拆得四分五裂，前端代码分散不便于管理，并且开发体验很不友好。  
而有了前端工程化的概念，前端项目和后台项目可以彻底分离，前端按自己想要的目录结构组织代码， 然后按照一定的方式构建输出到后台项目中，简直完美（是不是有种后宫佳丽三千的感觉）。

### 技术选型 ###

调研了市场主流的构建工具，其中包括gulp、webpack、fis，最后决定围绕gulp打造前端工程化方案，同时引入webpack来管理模块化代码，大致分工如下：  
`gulp`：处理html压缩/预处理/条件编译，图片压缩，精灵图自动合并等任务  
`webpack`：管理模块化，构建js/css。

至于为什么选择gulp & webpack，主要原因在于gulp相对来说更灵活，可以做更多的定制化任务，而webpack在模块化方案实在太优秀（情不自禁的赞美）。

## 怎么设计前端项目目录结构？ ##

抽离出来的前端项目目录结构如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VuZ2xpc2gwNTIz_size_16_color_FFFFFF_t_70][]

`appfe目录`：appfe就是前面提到的前端项目，这个项目主要包含两部分：前端代码、构建任务  
`appfe > gulp目录`：包含了所有的gulp子任务，每个子任务包含相关任务的所有逻辑。  
`appfe > src目录`：包含了所有前端代码，比如页面、组件、图片、字体文件等等。  
`appfe > package.json`：这个不用说了吧。  
`appfe > gulpfile.js`：gulp入口文件，引入了所有的gulp子任务。

理想很丰满，现实却很骨感，这么美好的愿望，在具体实践过程中，注定要花不少心思，要踩不少坑。  
好奇心日报这次升级改造即将上线，终于也有时间把之前零零碎碎的博文整合在一起，并且结合自己的体会分享给大家，当然未来可能还会有较大的调整，这儿抛砖引玉，大家可以参考思路。

### gulp 是什么？ ###

gulp是一个基于流的构建工具，相对其他构件工具来说，更简洁更高效。  
Tip：之前写过一篇[gulp 入门][gulp]，可以参考下，如果对gulp已经有一定的了解请直接跳过。

### webpack 是什么？ ###

webpack是模块化管理的工具，使用webpack可实现模块按需加载，模块预处理，模块打包等功能。  
Tip：之前写过一篇[webpack 入门][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)][node_webpack_gulp] ###

关键点

> 其中关键点是npm script中运行的代码是优先本目录中的模块，即运行webpack,gulp须要全局安装的模块时，现在只用安装在本项目内便可以运行

代码

1.   
    
    package.json
2.   
    
     
3.   
    
    \{
4.   
    
    ...
5.   
    
    scripts: \{
6.   
    
    "dev": "webpack",
7.   
    
    "build": "gulp"
8.   
    
    \}
9.   
    
     
10.  
    
    ...
11.  
    
    \}
12.

使用（交付后端）

只须要把整个本地项目全部复制给后端人员，并在后端开发机上安装node.js环境即可以正常运行

*  运行代码

1.   
    
    npm run dev
2.   
    
    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][http_vuejs.org_examples_svg.html]  
3.reactjs代码量最多，因为它既要管理UI逻辑，又要操心dom的渲染。  
4.extjs无感 没用过。  
5.angularjs渲染快，就是量大（相对于vue.js）。

前端工程化可以自动化处理一些繁复的工作，提高开发效率，减少低级错误。  
更重要的是，还是文章开头的说的，前端工程化最大的意义在于给我们新的视角去看待前端开发，让前端开发可以做更复杂、更有挑战的事情！

【参考文章】

1、前端三大主流框架的对比React、Vue、Angular - 简书 https://www.jianshu.com/p/c4005414025c

2、node.js+npm+vue+webpack+nginx前端项目打包部署到服务器 - https://blog.csdn.net/qq\_35813265/article/details/81872351

3、nodejs与nginx的完美搭配 - https://blog.csdn.net/qq\_17475155/article/details/66473855

4、用Nginx做NodeJS应用的负载均衡 - https://blog.csdn.net/chszs/article/details/43203127

5、使用pm2躺着实现负载均衡 - https://blog.csdn.net/qq\_17475155/article/details/53823862

转载于:https://www.cnblogs.com/think90/p/11454929.html

[Link 1]: https://me.csdn.net/English0523
[CC 4.0 BY-SA]: http://creativecommons.org/licenses/by-sa/4.0/
[https_blog.csdn.net_English0523_article_details_100009783]: https://blog.csdn.net/English0523/article/details/100009783
[Link 2]: https://www.baidu.com/index.php
[Link 3]: https://www.jianshu.com/p/8a837d830459
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VuZ2xpc2gwNTIz_size_16_color_FFFFFF_t_70]: /images/20230601/64e4b5a8b9a8467e952f99854299eae4.png
[gulp]: https://www.jianshu.com/p/9723ca2a2afd
[webpack]: https://www.jianshu.com/p/f890cbfcb11b
[node_webpack_gulp]: https://segmentfault.com/a/1190000010371324
[http_vuejs.org_examples_svg.html]: http://vuejs.org/examples/svg.html