Jenkins自动前端代码

简介: 最近公司项目重构,PHP的前后端代码分离,现在前端代码需要npm run build,现在根据之前的情况,进行前端构建拉取推送。

Jenkins自动前端代码

最近公司项目重构,PHP的前后端代码分离,现在前端代码需要npm run build,现在根据之前的情况,进行前端构建拉取推送。

一、环境配置

`[root@Minwanzo ~] curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

运行完成后需要退出当前环境,在连接一下,安装成功后在/root/.nvm

[root@Minwanzo ~] nvm --version
0.33.8

[root@Minwanzo ~] nvm install --lts #安装最新node
[root@Minwanzo ~] node -v #检查是否安装成功
v16.14.2
[root@Minwanzo ~] npm -v
8.5.0

下面是常用的nvm命令
nvm ls-remote:列出所有的node版本
nvm ls:列出本地已经安装的node版本
nvm install [-s] : 安装特定版本的node,比如:nvm install v6.0.0安装最新6.0.0的node。
nvm use [–silent]:切换到制定版本node
nvm current :当前 node 版本
nvm alias [别名] [node版本号] :给不同的版本号添加别名
nvm unalias [别名] :删除已定义的别名
nvm alias default [node版本号] :设置默认版本


**二、npm设置国内源**

web站点:npmmirror.com

Registry Endpoint:registry.npmmirror.com

```[root@Minwanzo ~] npm config set registry  https://registry.npmmirror.com           #设置为国内的淘宝镜像源
[root@Minwanzo ~] npm config get registry       #验证一下,返回为刚刚设置的镜像
https://registry.npmmirror.com

三、进入到项目里面,安装依赖环境和build

[root@Minwanzo test] npm run build          #然后对前端项目进行build

以上为在Linux中设置,下面配置Jenkins设置。

一、安装插件:nvm wrapper

版本查看Linux中执行:node -v
NVM_NODEJS_ORG_MIRROR配置为:cdn.npmmirror.com/binaries/no…
NVM_IOJS_ORG_MIRROR配置为:cdn.npmmirror.com/binaries/io…

image.png

二、在构建步骤中添加两个步骤:1、执行shell;2、Send files or execute commands over SSH。

cd jsmerchant &&                            #进到构建的目录,根据自己的项目调整
npm i && npm run build &&                   #编译环境和编译成dist
#cd dist &&                                 #进入编译目录
tar -cvzf dist.tar.gz dist                      #把编译文件进行打包
chown -R www:www /www/wwwroot/9092
cd /www/wwwroot/9092 && rm -rf dist                 #进入前端目录,先删除之前的dist文件
cd /www/wwwroot/9092 && tar -xvzf  dist.tar.gz && rm -rf dist.tar.gz    #进入前端目录,解压包,然后删除包

image.png

相关文章
|
4天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
86 0
|
4天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
50 4
|
4天前
|
前端开发 jenkins 持续交付
新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布(五)
新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布(五)
20 1
|
1天前
|
前端开发 JavaScript 安全
Mac部署Jenkins(保姆级教程!)_前端jenkins自动部署 mac
Mac部署Jenkins(保姆级教程!)_前端jenkins自动部署 mac
|
4天前
|
jenkins 持续交付 API
上传gitlab代码后jenkins自动进行发布的配置
上传gitlab代码后jenkins自动进行发布的配置
13 1
|
4天前
|
资源调度 前端开发 JavaScript
jenkins升级及基于jeecgboot 的nbcio-boot前端演示发布
jenkins升级及基于jeecgboot 的nbcio-boot前端演示发布
|
4天前
|
JSON 前端开发 搜索推荐
BoostCompass( http_server 模块 | 项目前端代码 )
BoostCompass( http_server 模块 | 项目前端代码 )
29 4
|
4天前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
【4月更文挑战第30天】Flutter旨在实现跨平台移动应用开发,但有时需针对iOS或Android编写特定代码。平台通道是关键机制,允许Dart代码与原生代码交互。通过`MethodChannel`等实现跨平台通信,然后在iOS和Android上响应调用。条件编译则在编译时决定特定平台代码。本文展示了如何在Flutter中处理平台特定功能,包括示例代码和总结。
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
|
4天前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
|
4天前
|
前端开发 开发者
【专栏】BEM(Block-Element-Modifier)是一种前端命名规范和架构方法,旨在创建清晰、可维护的代码结构。
【4月更文挑战第29天】BEM(Block-Element-Modifier)是一种前端命名规范和架构方法,旨在创建清晰、可维护的代码结构。它包括Block(独立功能单元)、Element(Block的子元素)和Modifier(表示状态或变体)。BEM的特点包括命名一致性、模块化设计、清晰结构和可复用性,适用于代码组织、样式管理、组件化开发和团队协作。虽然命名较长和学习成本是其局限性,但BEM在提升代码质量和效率方面具有显著优势,是前端开发的重要工具。