whole

概述

本页介绍视频前端团队的标准开发环境搭建和开发流程方法。我们的前端js库为KISSY，我们采用yeoman+grunt完成项目的目录结构生成和构建，整合flex-combo搭建轻量级的前端combo服务器，并基于git进行代码的管理和发布。我们的愿景是提供一个易上手、自动化、可扩展的前端开发流程，让你只在代码中畅游。

开发环境搭建

开发环境依赖于node、npm、git。必须保证你所处的系统环境中预装了这些工具包。

工具安装

首先安装yeoman和grunt：

    sudo npm install yo grunt-cli -g

然后安装generator-clam：

    sudo npm install generator-clam generator-kissy-gallery -g

generator-clam是由淘宝北京前端团队开发的一个公共的KISSY项目构建工具，其自定义了标准的KISSY项目结构代码生成器，整合了相关的grunt插件，提供前端开发手脚架功能。视频团队的构建工具作为一个分支，依附于generator-clam。

基本命令

generator-clam本身提供了众多的命令，我们只需要关注与视频项目相关的命令：

• yo clam:video，初始化一个标准的视频项目，生成其目录结构
• yo clam:page，初始化一个page的目录结构
• yo clam:mod，初始化一个业务模块（对应于视频项目里的一个widget）的目录结构
• yo clam:widget，初始化一个标准KISSY组件的目录结构，需首先创建组件空目录，再进入空目录后执行该命令
• yo clam:h，打印帮助

初始化完成的项目中包含了Gruntfile.js脚本文件，对外提供以下功能：

• grunt info，查看当前库的git地址
• grunt setbranch:x.y.z，修改配置文件中的版本号为x.y.z
• grunt server或grunt server:dev，开启开发环境模式的combo服务器
• grunt server:stage，开启模拟生产环境模式的combo服务器
• grunt build，进行项目构建

以上的基本命令此处只做罗列，具体的使用场景和配置方式参见后续内容。

目录结构和开发约定

一个标准的视频前端项目结构应该如下：

├── project root
    ├── Gruntfile.js     // grunt的构建脚本
    ├── abc.json         // 存放项目的基本信息
    ├── package.json     // 存放node的依赖关系配置
    ├── README.md        // 项目说明文档
    ├── docs             // 存放生成项目API文档
    ├── node_modules     // 存放项目的node模块
    └── src              // 项目源文件目录
        ├── config.js    // kissy配置文件
        ├── mod.js       // 模块依赖关系文件
        ├── page         // 存放demo页面和入口文件，可执行`yo clam:page`生成一个page
        ├── mock         // 存放假数据接口
        ├── service      // 存放封装好的ajax调用接口
        ├── widget       // 存放页面级别的业务模块，可执行`yo clam:mod`生成一个widget
        ├── util         // 存放应用级别的可重用组件，可执行`yo clam:widget`生成一个util
        └── lib          // 存放第三方的组件
    └── build            // 项目构建目录，目录结构与src保持一致

开发过程中有一些约定需要注意：

• 原则上不能随意修改项目目录结构
• page、mock、service、widget、util、lib这些目录下的文件结构可以自己组织，但强烈建议使用generator-clam的基本命令来生成标准的架构
• 应避免模块和组件的匿名定义
• mod.js文件应由构建脚本自动化生成
• build目录下的文件只能通过构建阶段生成，原则上只包含线上访问的静态文件及其源文件

初始化项目

我们接管一个项目主要有两种场景：开发原有的项目、开发新项目。

• 开发原有的项目，需要从gitlab上克隆项目的主干代码，然后执行npm install安装依赖的node包，便可以进入项目的开发。

• 开发新项目，首先在本地创建项目空目录，进入目录后执行yo clam:video，初始化的界面如下：

  

  完成初始化配置后，会在项目目录下生成标准的项目结构。如果在项目初始化阶段没有安装node包，请手动执行npm install。

前端combo服务器

项目构建

代码管理和发布