六甲おろし WEBサイト

これは部員向けの覚書です

はじめに

• yeoman を使っている

  • css, jsのライブラリはbowerで管理
  • タスク自動化ツールgulpを使用

• ページはejsで書かれ、ejsの変数はejs_var.jsonに書いたものが使用されます。

• この辺のツールは移り変わりが激しいのでちょっと苦労するかもしれない...

サイト編集方法

1. 必要なツールをインストールしておく

   • git

   • node.js https://nodejs.org/

   • yeoman

      npm install -g yo
     

   • 他にも色々必要かもしれない

2. データをダウンロード

   git clone https://github.com/RokkoOroshi/WebSite
   cd WebSite
   npm install & bower install
   

3. リアルタイムに更新を見ながら編集

   gulp serve
   

   ブラウザが起動、ファイルの編集がリアルタイムにブラウザに反映される状態

   app下にあるファイルを適宜編集する

4. ビルド

   gulp build
   

   dist下にコンパイルされたhtmlなどが出力される

5. サーバにアップロード

   あらかじめ、xreaの管理パネルでFTPホスト情報登録をしておく必要がある。

   まずサーバのアカウント情報を書いたファイル ftp-config.jsonをWebSoite下に用意する。以下のようなもの。ユーザ名等は誰かが知っているはず。

   {
   	"host" : "s190.xrea.com",
       "user" : ユーザー名,
   	"password" : パスワード,
   	"parallel" : 10
   }
   

   その後

   gulp deploy
   

   多分サイトが更新されているはず（されてなかったらブラウザのキャッシュかもしれないのでリロードしてみるべき）

   サーバ上にすでにあるファイルは、ローカルにより新しいものがあれば上書きされる。

   ローカルで消したファイルはサーバ側では消されず残る気がするので、別途FTPクライアントとかで入って消さないといけない。

   サーバ上にすでにあるフォルダと同じ名前のものを作るとサーバ上のものを上書きする気がするので要注意（何か対策必要？）

フォルダ構成

• 編集すべきファイルは app 下のもの。
• *.ejs はコンパイルされてhtmlになるファイル
  • app/layouts内, app/ _から始まるファイルはhtmlにされない（他のejsでincludeして使っている）
• app/styles/ *.scss はコンパイルされてcssになる
• distに出力されるファイルは魔法で全部minifyされている
• .tmpにminifyされていない, html,cssとかが生成されるはず