aggipp/hyplag-frontend-assets

HyPlag Frontend-Assets

镜像概述和主要用途

HyPlag Frontend-Assets是HyPlag项目基于Rails新实现的前端资产部分，主要负责前端资源的管理、编译和开发支持。该镜像集成Node Package Manager(NPM)和grunt构建工具，用于处理pug模板和scss样式文件的编译，同时提供开发环境下的文件监听、代码检查及文档生成功能，支持通过Docker Compose快速搭建开发和测试环境。

核心功能和特性

• 依赖管理：通过NPM安装和管理前端项目依赖
• 资源编译：使用grunt编译pug模板和scss样式文件
• 开发支持：提供文件监听功能，文件修改后自动重新编译
• 代码质量：集成ESLinter进行代码检查
• 文档生成：支持通过JSdoc生成项目文档
• 容器化部署：可配合Docker Compose搭建完整的开发/测试环境

使用场景和适用范围

适用于HyPlag项目的前端开发人员，用于本地开发、代码编译、质量检查和文档生成。同时支持团队协作时的开发环境一致性维护，以及快速部署测试环境。

详细使用方法和配置说明

前提条件

该应用依赖以下工具：

• Node Package Manager (>=7.x版本)
• grunt
• JSdoc (用于文档生成)

工具安装

1. 安装Node.js/NPM
   以Ubuntu为例：

   bash
   curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
   sudo apt-get install -y nodejs
   

2. 安装grunt-cli

   bash
   npm install -g grunt-cli
   

3. 安装JSdoc
   全局安装（可能需要sudo权限）：

   bash
   npm install -g jsdoc
   

   本地安装并保存到package.json：

   bash
   npm install --save-dev jsdoc
   

项目设置

依赖安装

在项目根目录执行以下命令安装所有依赖：

bash
npm install

资源编译

执行grunt命令编译pug模板和scss：

bash
grunt

开发环境

文件监听

开发过程中，执行以下命令启动文件监听，当.pug或.scss文件保存后自动重新编译：

bash
grunt

代码检查

已配置ESLinter进行代码检查。若使用Atom编辑器，建议安装linter和linter-eslint插件。

部署

执行以下命令进行生产环境部署：

bash
cap production deploy

文档生成

生成项目文档：

bash
npm run docs

常见问题及解决方法

问题1：Ubuntu 16上出现 "/usr/bin/env: ‘node’: No such file or directory"

解决方法：安装nodejs-legacy包，因为Debian系统上许多库会调用nodejs而非node：

bash
sudo apt-get install nodejs-legacy

问题2：执行'grunt build'时出现 "You need to have Ruby and Sass installed and in your PATH for this task to work."

解决方法：这可能是fsevents问题，需手动安装Sass：

bash
sudo gem install sass

Docker环境设置

通过Docker Compose搭建开发/测试环境，需先在系统上安装docker-compose。此外，还需安装Maven 8和Java 8。

步骤：

1. 检出所有子模块：

   bash
   git submodule update --init --recursive
   

2. 构建后端jar文件：
   进入hyplag-backend目录并执行：

   bash
   mvn clean package -DskipTests
   

3. 启动Docker环境：

   bash
   docker-compose up
   

访问地址：

• 前端：http://localhost:3000
• 后端：http://localhost:8080 = 前端资产：http://localhost:3001

注意：密码存储在.env文件中。