参考龙恩：Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能
准备JAVA环境
1、下载jdk。
链接：https://pan.baidu.com/s/1R9RZ3hGqGT2_p9IlnNUxyQ
提取码：dcrs
--来自百度网盘超级会员V5的分享
2、配置环境变量。
双击安装
在相应安装目录下，找到其bin目录，将该目录配置到系统环境变量。
Jenkins下载安装
1、下载
jenkins下载地址
2、安装
双击安装，下一步下一步即可。
报错：
报错原因：需要配置用户组与权限。
解决办法：
官网请参考：https://www.jenkins.io/doc/book/installing/windows/#invalid-service-logon-credentials
我的解决办法：
安装要在域用户帐户下运行的服务时，该帐户必须有权登录为服务.此登录权限严格适用于本地计算机，并且必须在本地安全策略中授予. 执行以下操作，以编辑要定义"作为服务登录"权限的计算机的本地安全策略:
- 使用管理特权登录到计算机.
- 打开"管理工具"，然后打开"本地安全策略"
- 展开"本地政策"，然后点击"用户权限分配"
- 在右窗格中，右键单击"作为服务登录"，然后选择属性.
- 单击"添加用户或组..."按钮以添加新用户.
-
在"选择用户或组"对话框中，点击“高级”--“立即查找”，在搜索结果中选择您想要输入的用户，然后单击"确定“
image.png -
在"作为服务登录"属性中单击"确定"以保存更改.
image.png
成功：
注意：
jenkins和jdk版本有一定对应关系，我的是jenkins2.303 jdk11
windows10家庭版没有用户组与权限配置，需要添加，添加步骤如下：
- 新建txt内容如下：
@echo off
pushd "%~dp0"
dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >List.txt
dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientTools-Package~3*.mum >>List.txt
for /f %%i in ('findstr /i . List.txt 2^>nul') do dism /online /norestart /add-package:"C:\Windows\servicing\Packages\%%i"
pause
- 保存为.bat文件
-
以管理员运行即可添加用户组与权限：
image.png
应用初始化
1、使用初始密码登录
Jenkins安装后自动打开http://localhost:8080/,需要密码登录，初始密码在用户目录的对应文件中：
C:\Users\gwq\AppData\Local\Jenkins.jenkins\secrets\initialAdminPassword
2、安装默认插件
点击安装推荐的插件即可
3、创建第一个管理员用户
安装完成后，我们需要 创建第一个管理员用户。
Jenkins实现自动化部署
1、获取访问github的token值
如果要实现自动构建的话，Jenkins需要获得远程代码仓库Github的读取权。
点击右上角的 Github --> setting --> Developer settting --> Personal access tokens -> 点击Generate new token 填写如下所示的内容：
创建成功后，会生成一个token的值如下：
2、实现内网穿透
Ngrok的用途是：将内网的IP映射成对外可访问的域名。
（1）官网注册为会员
（2）Ngrok教程
（3）启动客户端
./sunny.exe clientid xxxxxx
3、 Github webhooks设置
进入Github上指定的项目 --> setting -> WebHooks --> add webhook, 如下图所示：
完成后，点击下面 add webhooks 按钮，即可创建完成，如下图所示:
4、安装Github Plugin
点击 Manage Jenkins -> Manage Plugins -> 可选插件， 如下图所示:
插件安装
点击下面的 "直接安装" 按钮, Jenkins会自动帮我们解决插件的依赖。如下图所示：
jenkins插件安装
如果打开Manage Jenkins提示反向代理设置有误，如下图：
则打开系统设置界面，将1与2处url填写一致即可，如下：
5、配置Github Plugin
Manage Jenkins -> Configure System -> Github -> 点击添加Github服务器， 如下图所示：
如上，我们之前已经生成了token之后。在如上配置中，我们页面中的类型选择 Secret text，在Secret中黏贴Github生成的Token，id和描述可以随便写，或不填。
最后点击添加按钮后，会回到主页面，在凭据中选择我们刚才创建的凭据，然后我们点击 "链接测试"。如果没有成功的话，则需要返回重新操作以上步骤，如下所示，我们只要点击保存完成配置即可，如下图所示:
注意，token添加成功后，前面下拉列表要选择对应的id：
token ID
6、 Jenkins中创建任务
因此准备工作已经完成了，我们输入任务名称后，选择第一项后，点击底部的确定按钮，就可以进入下一步的页面了，如下图所示:
如上选择Github，填写项目的URL，该地址是我们Github上的主页地址，不是github仓库地址。
源码管理
打开刚刚我们创建的任务，切换到 "源码管理" tab项，然后在左侧选择 Git，然后我们把我们的github项目中的仓库地址，添加配置登录名和密码(点击添加会弹出一个框，我们默认操作就行)，及分支。如下图所示：
构建触发器
构建环境
其他暂时不用配置。配置完成后，我们再回到列表页面，看到基本的效果如下图所示，现在我们在本地项目代码再push一下，看是否发生了变化。
如上我们可以看到，我们每次代码push的时候，Jenkins会自动帮我们构建一次，但是它有几秒钟的延迟，如果我们立即push完成后，刷新页面后，并没有立即看到构建完成，而要过几秒钟再看下就可以了。
我们也可以看看控制台输出的信息也可以看得到如下信息，代表构建了。如下：
但上图显然是构建失败了，因为在项目配置中源码管理这一栏，git仓库的master分支在jenkins里叫做main
如上只是简单使用我们的github中的push命令后，在Jenkins中构建一下我们的代码，但是我们都明白我们希望的是，我们的push命令后，在Jenkins上会帮我们自动打包，比如像webpack中一样，调用npm run build 这样的命令后，打包到dist文件夹内，然后把dist文件夹内的所有代码放到ftp服务器下，因此我们想使用jenkins是否也能实现这样的呢？
实现自动化构建
如上git push 触发钩子后，jenkins就可以开始工作了，我们之前使用webpack打包的，我们现在放到Jenkins来做这件事。
在我们的package.json 文件中有如下二个命令:
"scripts": {
"dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "webpack --progress --colors --devtool cheap-module-source-map"
},
为了能在Jenkins能自动打包构建，首先我们需要安装依赖包，使用命令：npm install,最后使用npm run build 构建文件。因此会使用到如下两个命令:
npm install
npm run build
我们想要在jenkins里面执行npm命令的话，首先我们需要在jenkins里面配置node环境，我们可以通过配置环境变量的方式引入node，也可以通过安装插件的方式来引入的，我们这边使用插件的方式吧，安装一下 nvm wrapper 这个插件。
（1）在Jenkins中安装NodeJS Plugin
在插件管理界面搜索NodeJS，找到后，安装，重启，如下所示：
（2）全局配置中安装NodeJS
Manage Jenkins -> Global Tool Configuration -> NodeJs(点击新增NodeJS按钮) 如下图所示:
点击保存按钮即可。
（3） 在构建环境配置下安装nodejs
构建环境勾选 Provide Node & npm bin/folder to PATH，如下图所示：
每次build，都会首先执行环境构建，如果环境没有错误后，才会开始真正的实现构建过程。
（4） 构建
我们现在可以把我们的打包命令放到构建中了，在构建过程中会执行该命令进行打包。如下命令：
npm config set registry http://registry.npm.taobao.org/ && npm install && rm -rf dist && npm run build
如下所示：
然后我们就可以点击保存按钮了。
此时我在本地项目中改下代码，然后使用git push代码上去的时候，就可以测试下，在push的过程中，再看看Jenkins中如下所示：
然后点击下面正在的的构建，控制台输出选项，如下图所示：