前端项目编译
1. 编译器前端开发
编译器粗略分为词法分析,语法分析,类型检查,中间代码生成,代码优化,目标代码生成,目标代码优化。把中间代码生成及之前阶段划分问编译器的前端,那么后端与前端是独立的。后端只需要一种中间代码表示,可以是三地址代码或四元式等,而这些都与前端生成的方式无关。也就是不论你前端是用fortran还是c/c++,只要生成了中间代码表示就可以了,后端是不管你是用哪种语言生成的。
2. gitLab CI/CD docker自动部署vue前端项目
查询了好多资料,都没有找到可以直接应用的,综合了好多,配置runner之后,前端项目里面需要在项目根目录配置三个文件:
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 设置缓存
cache:
paths:
- node_moles/
- dist/
# 安装依赖 before_script 会在每个 stages 执行之前运行
before_script:
- npm install
# 编译 这里对应上方 stages ,
build:
stage: build
script:# script 为要执行的命令,可以多条按顺序执行
- npm run build:prod
docker-deploy:
stage: deploy
# 执行Job内容
script:
# 通过Dockerfile生成pactera_pflife_ui镜像
- sudo docker build -t pactera_pflife_ui .
# 删除已经在运行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通过镜像启动容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 执行Job的服务器
- pflife-web
only:
# 只有在master分支才会执行
- dev_xht
2.Dockerfile 文件
# 设置基础镜像
FROM nginx:latest
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改为docker服务宿主机的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
总之,三个文件部署之后运行正常
3. 前端通过gulp编译后的文件,怎么部署到服务器
服务器上写部署脚本,从代码库里拉项目代码,跑gulp自动化。或者打包传给后端让他搞。
4. angular打包后在其他前端项目中引用
前言:突发奇想,angular打包后是编译成HTML和js文件的,那我在其他的项目中,是否能使用angular做的一些组件功能呢?
1.ng build打包后dist文件,里面除了一个root标签,就是一些js引用。这里涉及到他的一些底层的编译。因为他最后编译后,都是会编译成HTML和js文件。
2.模仿引入他的js文件。新建一个HTML,将上述打包好的js文件引入,注意,需要引入base这个标签和root这个标签
5. 什么是编译程序的前端
编译程序的前端通常指:词法分析、语法分析、语义分析等生成最终代码以前的一系列步骤
6. 前端开发常用哪些工具软件
前端开发的编译器在选择上还是很多的。在学校里,老师主要讲三个前端开发软件:
1、WebStorm
帮助编写HTML、CSS、Less、Sass和Stylus代码,并且支持Node.js和主流框架,如React、Angular、Vue.js、Meteor等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。
2、IntelliJ idea

页面很简单,乍一看像是一个记事本,它也确实可以当记事本用。有很多特色插件可以使用,支持多种编程语言的语法高亮显示,具有代码折叠功能。
2、HBuilderX
HBuilderX是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本,具有轻便、适合vue框架的特点。
