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
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
- 公開フォルダとなっております。