{"id":19660947,"url":"https://github.com/o2team/generator-athena","last_synced_at":"2026-05-11T01:52:13.824Z","repository":{"id":177778266,"uuid":"40798690","full_name":"o2team/generator-athena","owner":"o2team","description":"[DEPRECATED]JDC构建项目生成工具","archived":false,"fork":false,"pushed_at":"2015-12-15T13:57:33.000Z","size":28,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-02-17T08:47:32.041Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/o2team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-08-16T04:22:02.000Z","updated_at":"2016-06-29T03:00:05.000Z","dependencies_parsed_at":"2023-07-25T17:43:31.865Z","dependency_job_id":null,"html_url":"https://github.com/o2team/generator-athena","commit_stats":null,"previous_names":["o2team/generator-athena","jdc-fd/generator-athena"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fgenerator-athena","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fgenerator-athena/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fgenerator-athena/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o2team%2Fgenerator-athena/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/o2team","download_url":"https://codeload.github.com/o2team/generator-athena/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240970214,"owners_count":19886526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T16:06:00.823Z","updated_at":"2026-05-11T01:52:13.784Z","avatar_url":"https://github.com/o2team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# generator-athena\n\n[![npm version](https://badge.fury.io/js/generator-athena.svg)](http://badge.fury.io/js/generator-athena)\n[![Code Climate](https://codeclimate.com/github/luckyadam/generator-athena/badges/gpa.svg)](https://codeclimate.com/github/luckyadam/generator-athena)\n\n[DEPRECATED]代码已迁移至 [athena-html](https://github.com/o2team/athena-html)\n\n\u003e JDC构建项目生成工具，生成相应目录和代码，同时提供Gulp配置对项目进行编译\n\n## 安装\n\n基于``node``，请确保已具备较新的node环境\n\n需要全局安装**yeoman**\n\n```\n[sudo] npm install -g yo\n```\n\n然后安装本脚手架\n\n```\n[sodu] npm install -g generator-athena\n```\n\n## 项目结构\n\n一个项目对应一个目录，项目中可以包含多个模块，项目将由以下结构组成\n\n\n    ├── module1                 - 模块1\n    ├── module2                 - 模块2\n    ├── module3                 - 模块3\n    ├── gulpfile.js             - gulp文件\n    ├── app-conf.js             - 项目的配置信息\n    └── package.json\n\n项目中模块将由以下结构组成\n\n    ├── dist                    - 通过编译生成的目录\n    │   ├── combofile           - publish时用来存放生成页面和页面片文件的目录\n    │   ├── css                 - 通过编译生成的css文件\n    │   ├── js                  - 通过编译生成的js文件\n    │   ├── image               - 通过编译压缩后的image文件\n    │   ├── page1.html          - 通过编译生成的页面html\n    │   ├── map.json            - 通过gulp编译后生成页面依赖widget列表\n    |\n    ├── page                    - 所有页面目录\n    │   ├── page                - 某一页面目录\n    │       ├── page.css        - 页面级css\n    │       ├── page.js         - 页面级js\n    │       ├── page.html       - 页面html\n    │\n    ├── static\n    │   ├── css                 - 额外的css文件\n    │   ├── js                  - 额外的js文件\n    │   ├── image               - 额外的image文件\n    │  \n    ├── widget                  - 所有widget目录\n    │   ├── widget              - 某一widget目录\n    │       ├── image           - widget的图片目录\n    │       ├── widget.css      - widget的css\n    │       ├── widget.js       - widget的js\n    │       ├── widget.html     - widget的html\n    │\n    ├── static-conf.js          - 需要额外引用的静态资源的配置\n    │\n    └── module-conf.js          - 模块的配置信息\n\n在这种项目组织方式中，将页面拆分成各个widget组件，在页面中通过加载各个widget的方式来拼装页面，再经过gulp编译，生成正常页面。\n\n## 快速开始\n\n### 生成新项目\n\n生成一个新的项目目录\n\n```\nyo athena\n```\n\n然后根据提示一步一步来，将会自动生成项目的结构和所需文件代码，再也不用复制代码了哟~\n\n### 新增模块\n\n在某一项目中新增一个模块，比如在项目**wd**中新增一个**open**模块，需要在项目根目录下执行\n\n```\nyo athena:module [模块名]\n```\n然后根据提示一步一步来，将会自动生成项目的结构和所需文件代码，再也不用复制代码了哟~\n\n### 新增页面\n\n在某一模块下新增一个页面，**进入到该模块**下，执行\n\n```\nyo athena:page [pageName]\n```\n\n然后根据提示一步一步来，再也不用复制代码了哟~\n\n### 新增widget\n\n在某一模块下新增一个widget组件，**进入到该模块**下，执行\n\n```\nyo athena:widget [widgetName]\n```\n\n然后根据提示一步一步来，再也不用复制代码了哟~\n\n## 使用及编译\n\n### 模块化\n\n通过阅读设计稿，我们可以将页面拆分成不同``widget``，而一些可以通用的``widget``我们可以放到一个公共模块中去统一管理，通过这样的页面组件化方式，我们可以很好地避开复制代码的问题，同时让我们的代码更好管理。\n\n在执行``yo athena:page [pageName]``命令生成页面后，可以发现在模块的``page``目录下多了一个以刚刚输入的页面名称``pageName``作为名字的目录，这个目录下面包含 **html/js/css** 三个文件。在``html``文件中一般通过加载各个``widget``的方式来进行开发，具体代码如下：\n\n```\n\u003c%= widget.load('user') %\u003e\n\u003c%=\n\twidget.load('user', {\n\t\tparam: 'test'\n\t})\n%\u003e\n\u003c%= widget.load('user', null, 'gb') %\u003e\n```\n``widget.load``可以方法接收三个参数，第一个参数是``widget``的名称，后面两个参数是可选参数，第二个是向``widget``传递的一些参数，第三个是``widget``所属的模块，如果是本模块，可以不传。\n\n### 页面中API\n\n#### widget.load\n\n如前一小节所显示，用来加载组件\n\n#### getCSS\n\n使用方式 `\u003c%= getCSS() %\u003e`\n\n用来输出页面所需引用的**CSS Link**，可传入2个参数，第一个参数是`CSS` 样式表的名称，第二个参数是模块名。如果什么都不传则默认输出与当前页面同名的样式表。例如：\n\n当前模块`hello`中有一页面为`mine.html`，在页面`\u003chead\u003e`标签中调用`\u003c%= getCSS() %\u003e`将输出\n\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/mine.css\" combo-use=\"/hello/css/mine.min.css\"\u003e\n```\n\n#### getJS\n\n与上述`getCSS`相似，将输出页面所需引用的脚本文件，参数与`getCSS`保持一致。\n\n当前模块`hello`中有一页面为`mine.html`，在页面`\u003cbody\u003e`标签最后调用`\u003c%= getJS() %\u003e`将输出\n\n```\n\u003cscript src=\"js/hello.js\"\u003e\u003c/script\u003e\n```\n\n\n**注意**\n\n* 这些API调用语句末尾不要加分号\n\n### app-conf.js\n\n在**项目**的根目录下生成的文件中，**app-conf.js**文件是一个通过传入配置项生成的关于本项目的配置文件，我们可以看到它包含如下配置：\n\n```javascript\n\n'use strict';\n\nmodule.exports = {\n  app: 'qwd', // 项目名称\n  common: 'gb', // 公共模块\n  moduleList: ['gb', 'frs', 'test'], // 项目下模块列表，通过yo athena:module命令生成模块时会自动往此处添加新模块名\n  deploy: {  // 需要发布时的配置\n    qiang: {\n      host: 'labs.qiang.it', // 机器host\n      user: '', // 用户名\n      pass: '', // 密码\n      port: 21, // 端口\n      remotePath: '/labs.qiang.it/h5/qwd/frs' // 上传到的目录\n    },\n    jdTest: {\n      host: '192.168.193.32',\n      user: '',\n      pass: '',\n      port: 22,\n      fdPath: '/fd/h5',\n      domain: 's.paipaiimg.com',\n      remotePath: '/export/paipai/resource/static/fd/h5/hellokity',\n      cssi: '/export/paipai/resource/sinclude/cssi/fd/h5/hellokity', // 上传页面片的目录\n      assestPrefix: '/static/fd/h5/hellokity', // 发布完静态资源后，静态资源路径\n      shtmlPrefix: '/sinclude/cssi/fd/h5/hellokity' // 发布完页面片后，静态资源路径\n    },\n    tencent: {\n      host: '172.25.34.21',\n      user: '',\n      pass: '',\n      port: 21,\n      fdPath: '/fd/h5',\n      domain: 'static.paipaiimg.com',\n      remotePath: '/newforward/static/fd/h5/hellokity',\n      cssi: '/newforward/static/sinclude/cssi/fd/h5/hellokity',\n      assestPrefix: '/static/fd/h5/hellokity',\n      shtmlPrefix: '/static/sinclude/cssi/fd/h5/hellokity'\n    }\n  }\n};\n\n```\n其中 **app**、**common** 配置项 **不要** 修改，我们需要重点关注 **deploy** 这个配置项，这是发布到一些机器上的配置，可以注意到用户名和密码是空的，我们需要自己去完善它，同时上传的目录可以根据自己的需要进行修改。\n\n### module-conf.js\n\n包含模块的一些配置信息\n\n```javascript\n\n'use strict';\n\nmodule.exports = {\n  creator: 'luckyadam',  // 模块创建者\n  app: 'hw',  // 项目名称\n  common: 'gb',  // 公共模块名称\n  module: 'mm',  // 当前模块名\n  description: 'test',  // 模块简要信息\n  support : {  \n    px2rem: {  // px转rem配置\n      enable: false,  // 是否开启\n      root_value: 40,\n      unit_precision: 5,\n      prop_white_list: [],\n      selector_black_list: [],\n      replace: true,\n      media_query: false\n    },\n  }\n};\n```\n\n### static-conf.js\n\n需要引用`static`目录下资源的配置，由使用者自定义，一般可以用来自定义配置一些需要额外引用的第三方库文件，例如：\n\n在`static/css`目录下存在`t1.css`，`t2.css`两个资源，需要将这两个资源引用到页面中，那么可以在该文件中增加如下配置\n\n```javascript\n\n'use strict';\n\nmodule.exports = {\n  staticPath: {\n    'test.css': [\n      'static/css/t1.css',\n      'static/css/t2.css'\n    ]\n  }\n};\n\n```\n\n`test.css` 是自定义的合并后css名称，若要在页面中引用，只需调用 `\u003c%= getCSS('test.css') %\u003e` 即可。引用js文件同理\n\n需要注意的是：\n\n* `test.css` 需带上后缀以示区分\n* 引用的资源路径，从static目录开始写全，如 `static/css/t1.css`\n\n### map.json\n\n**map.json** 文件是通过执行gulp任务后生成一个标识依赖关系的文件，文件中包含了当前模块所有页面所依赖的**widget**组件的信息，同时还有页面引用静态资源的信息，它的文件结构如下\n\n```javascript\n{\n  \"dependency\": {\n  \t\"find.html\": [],\n \t\"index.html\": [],\n \t\"open.html\": [],\n \t\"open1.html\": [],\n  \t\"open3.html\": [],\n  \t\"shop.html\": [\n   \t {\n      \t\"widgetName\": \"topbar\",\n      \t\"param\": {\n        \t\"topbar\": \"微信\"\n      \t},\n      \t\"module\": \"test\",\n      \t\"exists\": true\n     }\n   ],\n\n   \"include\": {\n    \"test.html\": {\n      \"css\": [\n        {\n          \"name\": \"gb.css\",\n          \"module\": \"gb\"\n        },\n        {\n          \"name\": \"test.css\",\n          \"module\": \"mm\"\n        },\n        {\n          \"name\": \"t.css\",\n          \"module\": \"mm\"\n        }\n      ],\n      \"js\": [\n        {\n          \"name\": \"test.js\",\n          \"module\": \"mm\"\n        }\n      ]\n    }\n  }\n}\n\n```\n\n### gulp\n\n在编写完页面后可以通过``gulp``命令来执行对整个项目的编译，编译后的结果生成在各个模块的``dist``目录下。\n\n同时你可以通过传入参数来决定你需要编译的模块，[模块名]参数指定模块，可以包含多个模块，多模块间使用 **,** 进行分隔\n\n```\ngulp --module [模块名]\n```\n\n\n### gulp serve\n\n通过``gulp serve``命令可以实时预览正在编辑的页面。你可以在根目录执行这个命令，也可以进入到具体模块目录下去执行这个命令\n\n如果在项目根目录下，可以通过携带参数来决定要浏览的页面：\n```\ngulp serve --module [模块名] --page [页面名]\n```\n\n如果在模块目录下，可以通过携带参数来决定要浏览的页面：\n```\ngulp serve --page [页面名]\n```\n\n### gulp deploy\n\n在 **项目根目录下** 通过 ``gulp deploy`` 会将整个项目重新编译，并且将编译好的文件部署到预览机器 *labs.qiang.it* 上去。我们需要更改 **app-conf.js** 的配置填写机器的用户名和密码。\n\n通过传入参数来观察文件传输情况：\n\n```\ngulp deploy --verbose\n```\n可以选择只发布一个模块的内容\n\n如果觉得一次性部署整个项目太慢，可以选择进入到你想要部署的 **模块** 下来执行 ``gulp deploy``\n\n### gulp publish\n\n``gulp publish`` 会将模块重新编译后发布到开发机上，同时会将压缩并重命名后的css文件和动态生成的页面片文件发布到机器的对应目录下。而在每次执行 ``gulp publish`` 后页面片中的时间戳将会自动更新。目前支持发布到腾讯和京东域的开发机，机器代号分别是 *tencent*\n*jsTest*。在 ``gulp publish`` 的过程中，你可以自行选择需要发布到开发机上的页面和对应静态资源。\n\n在模块目录下执行这个命令将会只发布本模块的页面。\n\n在项目根目录下执行，可以通过传参来决定将发布哪些模块。[模块名]参数指定模块，可以包含多个模块，多模块间使用 **,** 进行分隔\n\n```\ngulp publish --module [模块名]\n```\n\n### gulp clone\n\n进入到某一模块下，通过``gulp clone`` 命令可以复制另一个模块的**widget**到当前模块。\n\n```\ngulp clone --from [来源模块] --widget [widget名字]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo2team%2Fgenerator-athena","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fo2team%2Fgenerator-athena","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo2team%2Fgenerator-athena/lists"}