Bibi-frontend 项目使用教程

1. 项目目录结构及介绍

Bibi-frontend 项目的目录结构如下：

bibi-frontend/
├── app/
│   ├── components/
│   ├── directives/
│   ├── filters/
│   ├── services/
│   └── views/
├── build/
├── gulp/
├── static/
├── test/
├── .gitignore
├── LICENSE
├── README.md
├── gulpfile.js
├── package.json
└── server.js

目录结构介绍

• app/: 包含项目的前端代码，包括组件、指令、过滤器、服务和视图等。

  • components/: 存放 AngularJS 组件。
  • directives/: 存放 AngularJS 指令。
  • filters/: 存放 AngularJS 过滤器。
  • services/: 存放 AngularJS 服务。
  • views/: 存放 AngularJS 视图模板。

• build/: 存放编译和压缩后的前端代码，用于生产环境部署。

• gulp/: 存放 Gulp 任务配置文件。

• static/: 存放静态资源文件，如图片、CSS 和 JavaScript 文件。

• test/: 存放项目的测试代码。

• .gitignore: Git 忽略文件配置。

• LICENSE: 项目许可证文件。

• README.md: 项目说明文档。

• gulpfile.js: Gulp 任务配置文件。

• package.json: 项目依赖和脚本配置文件。

• server.js: 本地开发服务器配置文件。

2. 项目启动文件介绍

gulpfile.js

gulpfile.js 是 Gulp 任务配置文件，用于自动化构建和开发环境启动。主要任务包括：

• gulp dev: 启动开发环境，监控代码变化并自动刷新浏览器。
• gulp deploy: 编译和压缩前端代码，输出到 build/ 目录。

server.js

server.js 是本地开发服务器的配置文件，用于在开发过程中提供静态文件服务和 API 代理。

3. 项目的配置文件介绍

package.json

package.json 是项目的依赖和脚本配置文件，包含以下主要内容：

• name: 项目名称。
• version: 项目版本。
• scripts: 定义了项目的脚本命令，如 npm install 和 gulp dev。
• dependencies: 项目运行所需的依赖包。
• devDependencies: 开发过程中所需的依赖包。

.gitignore

.gitignore 文件用于配置 Git 忽略的文件和目录，避免将不必要的文件提交到版本库中。

LICENSE

LICENSE 文件包含了项目的开源许可证信息，本项目使用 Apache-2.0 许可证。

README.md

README.md 是项目的说明文档，包含了项目的简介、安装和使用说明等内容。

通过以上介绍，您可以快速了解 Bibi-frontend 项目的目录结构、启动文件和配置文件，从而更好地进行项目的开发和部署。