FEZ

FEZ 是面向前端模块化工程的构建工具。主要为解决前端开发多人高效协作、提高开发质量、及项目功能扩展的快速迭代和可维护性等问题。核心包括功能模块化、结构规范化、及开发自动化。

核心特性

功能模块化

FEZ 支持使用最新的ES6 Module来组织前端代码，并支持使用ES6标准特性开发项目，通过编译完美运行在各种浏览器中。可以整合如Vue等MVVM框架实现单文件组件形式的高效开发体验。

结构规范化

FEZ 将复杂的系统划分为功能页面，将复杂的页面划分为若干个模块，将模块分为：获取数据、渲染显示、交互操作，并且都有统一的文件结构。

统一的文件系统结构

页面模块结构

views
└── page1
    ├── index.html
    ├── index.js
    └── module
        ├── module1
        │   ├── index.js
        │   ├── index.hbs
        │   └── service.js
        ├── module2
        │   ├── index.vue
        │   └── service.js
        └── module3
            ├── index.js
            ├── module3-1
            │   ├── index.js
            │   ├── index.jade
            │   └── service.js
            └── module3-2
                ├── index.vue
                └── service.js

static
└── styles
    ├── page1
    │   ├── module1.less
    │   ├── module2.less
    │   └── module3.less
    ├── page1.less
    ├── page2
    │   ├── module1.scss
    │   ├── module2.scss
    │   └── module3.scss
    └── page2.scss

static
└── images
    └── page1
        ├── 1.jpg
        ├── 2.jpg
        └── folder
            ├── 1.png
            ├── 2.png
            └── 3.png

统一的职责划分

Service.js 专职提供各种方法处理API数据
.hbs 或 .jade 负责页面的html模板
index.js 或 index.vue 负责数据展现和交互操作

开发自动化

自动化搭建本地研发环境，快速响应文件更改并自动刷新浏览器。
自动化编译ES6或CommonJS标准的JS代码，自动化生成source map便于浏览器端调试。
自动化编译SASS/LESS => CSS文件，自动化添加CSS3的各种浏览器前缀。
自动化处理第三方库样式、项目公共样式、页面样式并自动化注入到页面。
自动化处理第三方库脚本、项目公共脚本、页面逻辑脚本并自动化注入到页面。
自动化搜索、下载、更新、管理开源库资源，根据配置并做自动化的资源合并。
自动化压缩JS、CSS、HTML、图片、字体等静态资源。
自动化SVG转ICON图片、雪碧图合成、移动端@2x/@3X图片适配，并自动化生成对应样式。
自动化转换所有CSS样式中的PX单位为REM单位。
自动化转换所有图片为WebP格式并生成对应样式文件。
自动化注入WebP浏览器支持检测脚本并替换所有的WebP文件。
自动化生成所有静态资源的MD5版本号。
自动化将所有静态资源添加CDN前缀。
自动化通过SFTP部署上线、或部署静态资源。

安装使用

安装

Mac系统推荐使用 iterm2 及 oh my zsh
类 Unix 系统，请打开任意终端输入命令执行。
Windows 用户请先安装 git，然后在 Git Bash 下执行命令

安装 Node 和 NPM

详细过程参考官网 https://nodejs.org (中文网站 http://nodejs.cn/)
支持所有Node的发行版本，建议使用最新稳定版 6.x 。
Ubuntu 用户使用 apt-get 安装 node 后，安装的程序名叫 nodejs，需要软链成 node
Windows 用户安装完成后需要在 CMD 下确认是否能执行 node 和 npm

全局安装 Gulp4.0

npm install gulpjs/gulp#4.0 -g

详情请参考 Github 社区 Gulp
目前Gulp发行版本是3.9.1，虽然4.0还未发布，依然阻止不了我们使用它高效的构建我们的项目。

如果安装过全局的非4.0版本 gulp 请先卸载 npm uninstall gulp -g

全局安装 Bower

npm install bower -g

使用Bower主要是为了管理从 github 下载的第三方框架库，通过页面自动化注入技术解决页面框架库的引入和管理问题，如果想用固定的CDN资源，手动的引入页面，可以不安装，并在项目根目录.fezrc 配置文件中将此配置关闭

运行 Demo 示例项目

安装 NPM 包

npm install

安装 Bower 包

bower install

运行 Demo 示例

gulp

FEZ 会自动打开默认浏览器进入研发环境，项目任意文件的更改都会自动刷新浏览器，请尽情享用FEZ为你带来的愉悦开发体验！

命令说明

研发环境

gulp

生产部署

gulp dist

SSH上传

gulp sftp

打包压缩

gulp zip

svg => icon 转换

gulp svg2icon

xueshuai/fez

FEZ