nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题（一）

项目介绍

项目前端框架是jquery+miniUI框架，它存在不少问题，但是我们的需求是最低支持IE8，所以一直还在用这个框架。目前项目已经试上线了4个月，上个月用户提了一个需求：每次功能升级后必须清空浏览器缓存才能看到最新的效果，能否自动清空浏览器缓存。这让我抓耳挠腮了很久，我们的办公环境和外网是隔断的，早有接触前端项目打包工具，但是在办公环境还没有尝试过，决定下定决心将这个问题解决。

打包工具选择

目前主流的打包工具是gulp和webpack，我在网上找了两者的不同：

gulp可以进行js，html，css，img的压缩打包，是自动化构建工具，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。

Webpack是前端构建工具，实现了模块化开发和文件处理。他的思想就是“万物皆为模块”，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。

Webpack是针对模块化开发的打包工具，不是我们项目所需要的，gulp正好满足我们的要求，所以我就选择gulp。

环境搭建

1、下载nodejs-11.5.0（不要用最新的版本，因为会与gulp出现不兼容问题）
地址为 https://nodejs.org/download/release/v11.5.0/
随便选择msi文件还是zip文件，我就用离线安装zip解压到本地。
2、安装nodejs-11.5.0
解压node-v11.5.0-win-x64.zip，在C:\Program Files目录下新建nodejs文件夹，将解压的文件拷贝到nodejs文件夹中。

3、查看版本号
在C:\Program Files\nodejs文件夹下运行cmd命令，进入命令行模式，查看node -v与npm -v

这是你在其他目录运行这两个命令会报“node”和“npm”不是内部和外部命令，原因是还没有配置环境变量。
4、配置环境变量
这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【C:\Program Files\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”进入环境变量对话框，在【用户变量】下选中【PATH】，在后面补充;C:\Program Files\nodejs;C:\Program Files\nodejs\node_global，如图：

PS:本文使用的是”用户变量“中的Path，用户变量与系统变量区别自行百度。
这时可以在任何位置启用命令行查看node与npm版本号了

5、安装gulp
运行npm install gulp -g

运行完成后可查看gulp的版本号

gulp相关组件下载安装在C:\Program Files\nodejs\node_global目录下

使用gulp

在F盘创建testapp文件夹，进入文件夹执行npm init命令，创建package.json文件。

执行npm install -g

执行完毕之后在项目中出现node_modules文件夹
node_modules文件夹中所有的组件仅供该项目使用，其他项目必须把组件拷贝至其他项目的对应文件夹中，引入资源才可使用。