帮忙建网站的人,大型门户网站制作流程,运营和营销是一回事吗,汕尾旅游攻略app跳转网站FEZ FEZ 是面向前端模块化工程的开发框架。主要目的是统一前端开发模式和项目开发结构#xff0c;自动化前端工作流#xff0c;提高开发效率和开发质量。使用持续集成等软件工程的架构模式#xff0c;集成众多业界先进的解决方案#xff0c;让研发人员更专注于业务逻辑的实… FEZ FEZ 是面向前端模块化工程的开发框架。主要目的是统一前端开发模式和项目开发结构自动化前端工作流提高开发效率和开发质量。使用持续集成等软件工程的架构模式集成众多业界先进的解决方案让研发人员更专注于业务逻辑的实现。核心包括功能模块化、结构规范化、及开发自动化。 FEZ倡导的前端开发理念 采用响应式界面布局一份代码各种终端设备兼容自动适配PC端、手机端、PAD端、及各种大小的屏幕并可以嵌入任何APP中使用。为产品的多元化几何倍的提高开发效率极大降低多平台项目的开发成本。模块化/组件化开发将复杂的系统细分为模块分治管理并有统一的文件结构兼顾模块的通用和复用原则极大提高项目的功能扩展和可维护性。积木式、组件化快速构建页面使用API接口/Mock数据前后端分离、并在流程上让设计、前端、后端、测试团队并行工作极大提高团队研发效率。使用国际前沿的工程自动化技术解决项目复杂的资源管理和大量重复的代码编译工作。FEZ使用场景 【一份代码支持多终端响应式WEB应用】参考示例fez-demo-handlebars【基于Vue的高性能大中型WEB应用】参考示例fez-demo-vue【基于React的高性能大中型WEB应用】参考示例fez-demo-react【高性能移动端混合APP及H5应用】参考示例fez-demo-framework7【快速构建中小型官方网站、活动、专题、宣传页面】参考示例fez-demo-75team fez-web【网页中显示艺术/特殊字体的官网网站、活动专题】参考示例fez-demo-fontminFEZ核心特性 功能模块化 FEZ 支持使用ES6 Module来组织前端代码支持使用ES5/ES6/ES7等标准特性开发项目通过Babel编译完美运行在浏览器中。可以整合如Vue、React等MVVM框架实现单文件组件形式的高效开发体验。 模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能所有的模块再进行统一的拼装和加载成为一个整体完成整个系统所要求的功能。 有关模块化的更多知识请参考【github.com/fouber/blog】【www.zhihu.com/question/37…】 结构规范化 FEZ 将复杂的系统划分为功能页面(组件)将复杂的页面(组件)划分为若干个模块将模块分为获取数据、渲染显示、交互操作并且都有统一的文件结构。 统一的项目开发结构 .
├── fez.config.js
├── gulpfile.babel.js
├── package.json
└── src├── lib├── static│ ├── fonts│ ├── images│ └── styles│ ├── page1.scss│ └── page2.scss└── views├── page1│ ├── index.html│ ├── index.js│ ├── service.js│ └── module│ ├── mod1│ │ └── index.js│ └── mod2│ └── index.js├── page2│ ├── index.html│ ├── index.js│ └── module│ ├── mod1│ │ ├── index.js│ │ └── service.js│ └── mod2│ └── index.js│ └── service.js└── public├── module└── utils复制代码开发自动化 FEZ 集成了大量自动化前端工作流。任何机械的重复性的工作都应该交给 FEZ 来完成。 自动化搭建本地研发环境快速响应文件更改并自动刷新浏览器。自动化同步浏览器中滚动页面、点击等行为到其他浏览器和设备中。自动化编译ES6/ES7或CommonJS标准的JS代码并生成source map便于浏览器端调试。自动化编译Sass/Less/Stylus CSS文件。自动化使用Autoprefixer添加CSS3的各种浏览器前缀。自动化处理第三方框架库JS脚本、CSS样式、Font字体等并自动化插入到页面。自动化根据配置合并前端JS、CSS文件。自动化压缩JS、CSS、HTML、图片、字体等静态资源。自动化Svg转Icon图标、雪碧图合成、移动端高清2x图片适配并自动化生成对应样式。自动化Svg图标合并、自动化使用symbol形式引入页面。自动化转换所有CSS样式中的PX单位为REM单位。自动化转换所有图片为WebP格式并生成对应样式文件。自动化注入WebP浏览器支持检测脚本并替换所有的WebP文件。自动化生成所有静态资源的MD5版本号。自动化添加所有静态资源添加CDN地址。自动化搭建用于测试上线代码的多终端测试环境。自动化通过SFTP部署上线、或部署静态资源。自动化通过Mock方式构建随机数据模拟研发和上线的数据环境。自动化创建统一结构化项目、及统一结构化的项目页面。自动化转换TTF为网页字体(eot,svg,ttf,woff,woff2)并生成font-face样式文件。自动化深度无损压缩PNG/JPG/JPEG图片。FEZ安装使用 Mac系统推荐使用 iterm2 及 oh my zsh类 Unix 系统请打开任意终端输入命令执行。Windows 用户请先安装 git然后在 Git Bash 下执行命令安装 1. 安装 Node 和 NPM 详细过程参考官网 https://nodejs.org (中文网站 http://nodejs.cn/)Node 5.10建议使用最新稳定版(LTS)。Ubuntu 用户使用 apt-get 安装 node 后安装的程序名叫 nodejs需要软链成 node。Windows 用户安装完成后需要在 CMD 下确认是否能执行 node 和 npm。 FEZ不能保证所有 window系统 下默认的 Nodejs 环境都能正常运行。可以尝试安装nodejs的windows开发工具集 2. 全局安装 Gulp4.0 任意目录执行 npm install gulpnext -g
复制代码详情请参考 Github 社区 Gulp 目前Gulp发行版本是3.9.1如果安装过全局的非4.0版本 gulp 请先卸载 npm uninstall gulp -g 3. 全局安装 Bower (可选安装) 任意目录执行 npm install bower -g
复制代码 使用Bower主要是为了方便管理基于浏览器的第三方框架库通过页面自动化注入技术解决页面框架库的引入和管理问题如果您使用node_module资源、或用固定的CDN资源、或手动在页面引入第三方框架库可以选择不安装。 下载FEZ工程框架 使用Git下载(推荐)git clone gitgithub.com:furic-zhao/fez.git
复制代码使用浏览器下载将https://github.com/furic-zhao/fez/archive/master.zip下载解压到任意目录。 使用FEZ工程框架 1. 安装FEZ的NPM依赖包在FEZ工程目录执行 npm install
复制代码2. 创建项目 在 FEZ 工程目录执行 gulp project --dirdemozhj
复制代码在FEZ工程目录下会自动创建结构化的 demozhj 项目 demozhj
├── fez.config.js / FEZ功能配置文件
├── package.json / 项目npm配置文件
├── gulpfile.babel.js / gulp入口文件
└── src / 源码目录├── lib / JS公共库文件目录├── static / 静态资源目录│ ├── fonts / 字体目录│ ├── images / 图片目录│ └── styles / 样式目录│ └── index.scss / 首页样式文件└── views / 业务逻辑存放目录├── index / 首页目录│ ├── index.html / 首页Html文件│ ├── index.js / 首页业务逻辑脚本文件│ └── module / 首页模块目录└── public / 业务逻辑公共文件目录├── module / 公共模块目录└── utils / 公共工具类库目录
复制代码 创建项目会默认创建index页面。 3. 运行项目 进入 demozhj 项目目录 执行 gulp
复制代码 FEZ 会自动打开默认浏览器进入研发环境项目任意文件的更改都会自动刷新浏览器请尽情享用FEZ为你带来的愉悦开发体验 命令说明 研发环境在项目目录执行gulp
复制代码 FEZ 会自动打开系统默认浏览器进入研发环境您可以打开多个不同终端和不同类型的浏览器访问同一开发页面开发过程中任何文件的更改或是在任何一个终端的浏览器中的操作行为都会同步到每个终端界面实时查看在每个终端的修改效果。 生产部署在项目目录执行gulp dist
复制代码 FEZ 会自动化编译源码目录中的所有文件(js、sass、less、html、图片、字体等)自动化生成md5版本号并将编译后的上线代码发布到dist目录。之后通过其它途径、或流程工具发布dist目录到线上服务器。 本地测试上线代码在项目目录执行gulp test
复制代码 FEZ 会自动化构建本地测试环境并自动打开系统默认浏览器对dist上线目录中的代码真实性的模拟服务器上的操作效果可以让测试人员打开多个不同终端和不同类型的浏览器一次性测试所有平台、所有浏览器中的最终产品的交互和操作。 SSH上传在项目目录执行gulp sftp
复制代码 FEZ 会调用项目目录中fez.config.js的sftp配置信息通过SSH方式快速部署dist 中的上线代码或是部署dist目录中的静态资源。 打包压缩在项目目录执行gulp zip
复制代码 FEZ 会自动化将dist目录中所有上线代码打包成dist.zip文件用于通过其它流程工具部署上线。 svg icon 转换在项目目录执行gulp svg2icon
复制代码 FEZ 会调用项目目录中fez.config.js的svgIcons配置信息自动化转换svg图标为icon字体文件并生成对应的样式文件。 合并雪碧图在项目目录执行gulp sprite
复制代码 FEZ 会调用项目目录中fez.config.js的sprites配置信息自动化合并slice目录中的小图标为雪碧图并生成sprite.png图片到images/sprite目录同时生成对应的样式文件(可配置生成css/less/sass/scss)到styles/sprite/目录 创建结构化模版页在项目目录执行gulp page --dirdemopage
复制代码demopage 页面结构 .
└── src├── static│ └── styles│ └── demopage.scss / demopage 页面样式文件└── views└── demopage / demopage 页面目录├── index.html / demopage HTML页面├── index.js / demopage 业务逻辑脚本文件└── module / demopage 模块目录
复制代码压缩ttf字体在项目目录执行gulp fontmin
复制代码 FEZ 会调用项目目录中fez.config.js的minfonts设置的网页中要显示的文本信息将src/static/ttf/目录中存放的普通大文件ttf字体生成网页字体(eot,svg,ttf,woff,woff2)并将生成后的小文件网页字体格式存放在src/static/fonts/目录下同时生成对应的font-face样式文件(css,less,sass,scss)可在页面样式中直接引用。FEZ让你在网页中大量的使用特殊字体成为可能请尽情发挥设计师的想象力。 示例fez-demo-fontmin 图片压缩在项目目录执行gulp imagemin
复制代码 FEZ 会对src/static/images目录中的图片(png,jpg,jpeg,gif)进行压缩。可以配置JPG图片质量压缩比。 图片深度压缩在项目目录执行gulp tinypic
复制代码 FEZ 会调用tinypngAPI对src/static/tinypic目录中的图片(png,jpg,jpeg)深度无损压缩将压缩后的图片输出到src/static/images压缩率达到50%以上压缩前后的图片质量几乎看不出来差别请尽情享用FEZ为你带来的图片极致性能优化。 FEZ升级 使用Git升级(推荐)如果你是通过Git下载FEZ工程在FEZ工程目录里面执行git pull然后执行npm install。 浏览器下载升级下载FEZ工程目录中的所有文件覆盖本地的FEZ工程目录中的所有文件然后执行npm install。 每次升级请确保在FEZ工程目录执行npm install。 FEZ使用文档 WIKI:github.com/furic-zhao/… FEZB分支 github.com/furic-zhao/… FEZB分支是FEZ的Browserify版本FEZ自4.0起使用webpack作为FEZ底层模块打包工具此分支不再做大的功能升级。 FEZ生态圈 FEZUIfezui.hestudy.com/ FEZUI 是一套基于 Vue 的支持多终端的用户界面交互组件库致力于积木式的快速构建项目自动适配PC端、手机端、Ipad端以及微信端或内嵌各种第三方Android、IOS的APP中使用提升产品体验和开发效率、降低开发和维护成本。 FEZ Layoutfezlayout.hestudy.com/ FEZ Layout 是基于vue、vuex、vue-router的现代响应式多终端UI布局框架旨在帮助团队快于构建多终端兼容的中后台产品的界面布局。 FEZMOCKfezmock.hestudy.com/ FEZMOCK 是一套前端数据模拟开发框架让前端工程师不再依赖服务端环境和接口数据而独立进行开发。增加单元测试的真实性通过随机数据模拟各种数据场景。 FEZ ApiDoc平台apidoc.hestudy.com/ API文档、技术文档协作开发平台。帮助团队前后端分离并行工作提高团队研发效率。
