‘壹’ 前端通过gulp编译后的文件,怎么部署到服务器
服务器上写部署脚本,从代码库里拉项目代码,跑gulp自动化。或者打包传给后端让他搞。
‘贰’ 大公司里怎样开发和部署前端代码
虽然美团不是大公司,但在这里写一下我们的情况,仅供参考。开发时的和部署时类库的引用和存放是一致还是不同?开发环境和部署环境的类库代码都是相同的,但物理位置不同。部署环境的类库在CDN上,开发环境的类库在开发服务器上。模块放在项目中还是放在 CDN 之类服务器?模块放在项目中,部署时都在CDN上。渲染网页用 Nginx 还是其他动态语言的 Web 服务器?前面用ngnix做负载均衡,后面用apache做web服务器。制作网页的流程, 是现有设计师的稿, 还是先看模块?先有设计师的稿再写模块,但很多时候并不需要设计师,因为架子已经搭好了,界面规范和基础元素都有,一般的界面前端工程师都能搞得定。会选择用自己写的模块还是从社区寻找模块?基础框架用的YUI3,大部分二次开发的底层模块,还有和业务紧密结合的UI模块都是自己写的。当然也会用社区写的模块,比如上传组件、highcharts、Ace等。如果说怎么选择模块的话,那就是具体情况具体分析了,总体原则有两个:能不自己写,就不自己写;选择最符合需求的,一般来说,要么选最好的,要么选最快出结果的。
‘叁’ 前端使用@vue/[email protected]打包,路由懒加载vue文件打包缺失,年初2月份的时候还能正常打包
不要 使用3.5以上的版本 很容易出现问题
你应该 使用稳定版
给你个 建议 更换版本
‘肆’ 前端的代码怎么部署到服务器
1、安装护卫神主机大师,一键配置全能网站环境
2、用主机大师开设网站,并绑定域名
3、解析域名到服务器IP
4、FTP上传前端代码到服务器
5、输入域名即可访问前端代码了
‘伍’ 怎么讲前端的代码打包成web app
方法/步骤
下载安装MyEclipse2014,Android SDK,eclipse(需配置Android开发环境)
Java和Android环境安装与配置,将另写经验分享,读者也可网络参考其他相关资料,自行安装
打开MyEclipse2014,新建一个HTML5 Mobile Application Project,命名,例如:hello
html5程序在工程www目录下编辑;
编辑好我们的html5程序,下面就要开始学习打包了
这里介绍两种打包方式:1、PhoneGap Build Service 打包
PhoneGap官网有相关教程可参考,不具体介绍
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好,android开发环境):
Step1、启动eclipse,新建Android Application Project,即Android工程,命名,例如:hello
Step2、将前面Myeclipse2014中编辑好的HTML5程序(www整个目录)拷至刚刚在eclipse新建hello工程对应assets目录下面
Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动,这里我们要使用Android系统自带的WebView控件(具体信息参考Adroid开发文档)---在工程下找到res->layout->activity_main.xml并打开,向里面插入WebView控件,编辑好自己想要的样式
Step4、在主程序入口,用刚刚编辑好的WebView控件将HTML5程序引入,此时,主体功能已实现,编译工程即可得到apk
‘陆’ 常见的前端集成部署方案有哪些各自的优缺点是什么
前端行业经历了这么长时间的发展,技术元素非常丰富,这里列举出一般web团队需要用到的技术元素:
开发规范:包括开发、部署的目录规范,编码规范等。不要小瞧规范的威力,可以极大的提升开发效率,真正优秀的规范不会让使用者感到约束,而是能帮助他们快速定位问题,提升效率。
模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。
组件化开发:在模块化基础上,以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护,组件单元是资源独立的,组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等,甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装,解决一些常见的组件渲染、交互问题。
组件仓库:有了组件化,我们希望将一些非常通用的组件放到一个公共的地方供团队共享,方便新项目复用,这个时候我们就需要引入一个组件仓库的东西,现在流行的组件库有bower、component等。团队发展到一定规模后,组件库的需求会变得非常强烈。
性能优化:这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富,就不在这里展开了,感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题,不能用工程手段保证的性能优化是不靠谱的,优化时只考虑一个页面的首次加载,不考虑全局在宏观统计上的优化提升也是片面的。
项目部署:部署按照现行业界的分工标准,虽然不是前端的工作范畴,但它对性能优化有直接的影响,包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
开发流程:完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本,工作这些年见过很多独立的系统(cms系统、静态资源推送系统)将开发流程割裂开,对前端开发的效率有严重的阻碍。
开发工具:这里说的工具不是指IDE,而是工程工具,包括构建与优化工具、开发-调试-部署等流程工具,以及组件库获取、提交等相关工具,甚至运营、文档、配置发布等平台工具。前端开发需要工具支持,这个问题的根本原因来自前端领域语言特性(未来我会单独写一篇文章介绍前端领域语言缺陷问题)。前端开发所使用的语言(js、css、html)以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统,要想把它们串联起来,才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响,因此能否串联其他技术要素,使得前端开发形成一个连贯可持续优化的开发体系,工具的设计至关重要。
‘柒’ webpack打包后的代码,如何部署到服务器上
本文章前端代码是基于vue+webpack开发的
Nginx是一款轻量级的Web 服务器/反向代理服务器
首先,webpack配置如下
在开发过程中,我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中,可以运行npm run build进行上线打包
打包完成后,会发现项目中多了dist这个文件夹
执行结果和webpack的配置文件一致。
代码被webpack打包完成后下一步就是部署到服务器上,此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设:
Windows操作系统:windows server 2008 64位
Nginx服务:nginx-1.12.2 64位
1.下载nginx-1.12.2 64位解压,假设nginx-1.12.2放在D:nginx-1.12.2目录中,nginx目录结构。如图下
2、前端代码放在D:nginx-1.12.2html目录中,dist目录就是刚刚前端打包完的代码。如图下
3、在D:nginx-1.12.2conf目录中,有个nginx.conf配置文件,进行编辑这个文件
4、假设前端的端口号为8082,如果端口号被占用,请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,
5、打开cmd控制台,进入目录D:nginx-1.12.2中,用start nginx命令启动服务,然后用tasklist /fi "imagename eq nginx.exe",查看nginx服务是否启动。
4、如果改变配置文件时,需要用nginx -s reload 命令重启nginx工作进程。
5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务
‘捌’ 一个前端页面如何部署
一个前端页面,在本地直接打开就能访问。另外如果是要放到服务器下的话,可以装个nginx,或者apache,或者tomcat,直接放到网页路径下,就行。
‘玖’ 在自己搭建的gitlab中,能部署用户可访问的前端打包文件吗
不知道 自建的gitLab 是否有 pages服务,
但是你既然有自己的服务器,应该是可以通过 Nginx 配置 ,将路径映射到你打包后的目录中去。这个是可以实现的
nginx 静态文件服务器的配置请网络。
‘拾’ 前后端分离的前端是怎么部署到生产环境中的,直接通过 nginx 吗
front-end-separate(前后端分离脚手架)
front-end-separate
一个前后端分离的脚手架工具(自主研发)
为什么选择grunt而不是gulp
如果你也和我一样喜欢grunt这种配置的方式,那么我相信这个脚手架觉对十分适合你
所有静态资源都md5全并压缩打包,css,js,img,html
已在生产环境验证
基于express和grunt的前后端分离框架
模板引擎使用的是nunjucks,好处是可以实现模版继承,又不像jade一样把html标签都简化了
express提供路由服务
项目中app为原代码文件(开发用),dist为打包后的文件(用于线上)
开发使用app,线上使用dist,支持一键cdn部署,加速你的项目
项目启动时,修改任何express代码,可以实现自动重启–基于nodemon
支持sass图片精灵(自动打包精灵图片,再也不用手动去拼凑了)
基于grunt md5 打包合并
线上输出的html已经压缩成一行(让你的代码更有Geeker范)