/fez

前端模块工程自动化构建工具

Primary LanguageJavaScript

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系统推荐使用 iterm2oh 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 包

  • 进入fez 目录执行以下命令
npm install

安装 Bower 包

  • 进入项目 demo 目录执行以下命令
bower install

运行 Demo 示例

  • 在项目目录下执行
gulp

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

命令说明

  • 研发环境
gulp
  • 生产部署
gulp dist
  • SSH上传
gulp sftp
  • 打包压缩
gulp zip
  • svg => icon 转换
gulp svg2icon

待续...