https://github.com/webcyou/ui-parts-manager
UI パーツを管理する「UIPM - UI Parts Manager」のレポジトリです。
https://github.com/webcyou/ui-parts-manager
Last synced: over 1 year ago
JSON representation
UI パーツを管理する「UIPM - UI Parts Manager」のレポジトリです。
- Host: GitHub
- URL: https://github.com/webcyou/ui-parts-manager
- Owner: webcyou
- Created: 2015-12-07T21:58:39.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-08T17:32:22.000Z (over 10 years ago)
- Last Synced: 2025-04-01T13:51:12.812Z (over 1 year ago)
- Language: JavaScript
- Size: 317 KB
- Stars: 7
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UIPM： UI Parts Manager
FrontEnd Developer Tool
「UI Parts Manager」
## What is this? 「これは何？」
フロントエンド開発環境にて、UIパーツをGUIで管理する Nodeモジュールとなっております。
## Install
### npm
````
$ npm install ui-parts-manager
````
## Use Module
````
var uipm = require('ui-parts-manager');
uipm();
````
Grant.jsやGulpのタスクに追加すると良いかと思います。
起動すると、開発環境のルートに「uipm.json」が生成されます。
追加したUIパーツ情報はこちらのjsonファイルで管理されます。
ポート番号はデフォルトは「8818」となっております。
cssの追加を行いましょう。
開発環境のルートから「/」でcssファイルのあるパスを指定します。
（レイアウト崩れましたら連絡いただけるとありがたいです。絶賛対応中）
cssファイルを追加したら、メニューバー右にあるプラスアイコンでカテゴリを追加します。
ダブルクリックで編集。名前を入力できます。
右下のプラスアイコンでアイテム項目を追加し、ダブルクリックで編集。
こちらにHTMLを入力していきます。
このような感じでパーツの種類ごとになど自由に管理していくことが可能となっております。
## Options
| OptionName | DefaultValue | SetValue | OptionDetail|
| --------------- |:---------------:| -------------------- | -------:|
| root | process.cwd() | path | 作業行うルートパス |
| port | 8818 | number | ポート番号 |
### Options exsample
````
var uipm = require('ui-parts-manager');
uipm({
root: __dirname + '/app/sp_web',
port: 8888
});
````
## Author
Daisuke Takayama
## License
Copyright (c) 2015 Daisuke Takayama
Released under the [MIT license](http://opensource.org/licenses/mit-license.php)
## Development start!
````
$ git clone git@github.com:webcyou/ui-parts-manager.git
$ npm install
$ gulp tsd
$ gulp
# Let's access http://localhost:8818/ & coding!!
````
### Directory structure
````
├── data
│ ├── html
│ ├── css
│ ├── js
│ ├── ts
│ └── scss
│ └── common.scss
├── lib
│ └──uipm.js
│
├── public
│ ├── assets
│ ├── html
│ ├── css
│ ├── img
│ └── js
│
├── .gitignore
├── gulpfile.js
├── README.md
├── bower.json
├── package.json
├── tsd.json
├── tslint.json
└── uipm.json
````
### gulpfile.js
- gulp の処理が書かれています。
### bower.json
- bower package
### package.json
- gulp で使うパッケージ類がここで管理されている
### uipm.json
- UI Parts Manager を管理するjsonファイルです。
### data
基本、dataフォルダ内のファイルを扱います。
webアプリ側の処理となっております。
#### data/scss
- SCSS File
- styleに関してはscssファイルを修正。（cssファイルは扱いません。）
#### data/ts
- TypeScript File
- scriptに関しては、TypeScriptファイルを修正。
#### data/img
- imageファイルはここに格納します。
### lib
- uipm.jsにserverの処理を記述しております。
### public
- 公開フォルダとなっております。