lancers-clientside
v0.0.1
Published
the source of lancers-clientside
Downloads
42
Readme
ブラウザ側アプリ関連資料
このディレクトリ以下はクライアントサイドのビルドに用いられるために使用します。 ビルド後の生成物については、/appディレクトリ以下に出力しますが、このディレクトリ自体はデプロイに含めないでください。
ディレクトリレイアウト
現状では以下の構成となっています。
app/
└── webroot/
└── css/
| └── main.min.css(ビルド後圧縮後)
└── renewal/ (メッセージ機能リニューアル関連)
gulp/
|
└── src/
| └── sass (sassファイル置き場)
| └── core/ (ベース部分)
| └── definition/ (定数など)
| └── parts/ (ボタンなど)
|
└── doc_assets/ (StylueGuideのレイアウト)
|
└── code_example_templates/ (StylueGuideのコード部分テンプレート)
|
└── docs (生成されたStyleGuide)
| └── css/ (StyleGuide用のcss)
| └── js/ (StyleGuide用のjs)
| └── img/ (StyleGuide用の画像)
|
└── package.json (外部ライブラリ等の管理ファイル)
|
└── node_modules (外部ライブラリ: git管理外)
|
└── gulp.js (ビルドスクリプト)ローカル開発環境構築手順
- 開発を行われているバージョンに合わす
node v8.2.1
npm 5.3.0
gulp CLI version 3.9.1- nodeblewのインストール
$ curl -L git.io/nodebrew | perl - setup
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0
0 0 0 0 0 0 0 0 --:--:-- 0:00:04 --:--:-- 0
100 24340 100 24340 0 0 5636 0 0:00:04 0:00:04 --:--:-- 5636
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================- パス追記、設定読み込み
※ bashを使っている場合
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile※ zshを使っている場合
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
$ source ~/.zshrc- インストール可能なnodeバージョン確認
$ nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7
v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15
v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23
v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31
v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95
v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103
v0.1.104
・
・
・
v4.0.0 v4.1.0 v4.1.1 v4.1.2 v4.2.0 v4.2.1 v4.2.2 v4.2.3
v4.2.4 v4.2.5 v4.2.6 v4.3.0 v4.3.1 v4.3.2 v4.4.0 v4.4.1
v4.4.2 v4.4.3 v4.4.4 v4.4.5 v4.4.6 v4.4.7 v4.5.0
v5.0.0 v5.1.0 v5.1.1 v5.2.0 v5.3.0 v5.4.0 v5.4.1 v5.5.0
v5.6.0 v5.7.0 v5.7.1 v5.8.0 v5.9.0 v5.9.1 v5.10.0 v5.10.1
v5.11.0 v5.11.1 v5.12.0
v6.0.0 v6.1.0 v6.2.0 v6.2.1 v6.2.2 v6.3.0 v6.3.1 v6.4.0
v6.5.0 v6.6.0
・
・
・- バージョンを指定してnodeをインストール
$ nodebrew install-binary v8.2.1
Fetching: https://nodejs.org/dist/v8.2.1/node-v8.2.1-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully- 使用するバージョンを指定
$ nodebrew use v8.2.1
use v8.2.1- バージョン確認
$ node -v
v8.2.1
$ npm -v
5.3.0- npm loginを行う
$ npm loginuser, id, passはご存知の方から聞く。
Usage (共通)
node.jsをインストール nodeのパスが通っていることを確認
gulp/ にて
$ npm iこれで、外部ライブラリが入ります。 あとは
$ npm run dev上記でsrc/以下のファイルを監視し、変更があれば自動的にビルドが走り、sassのコンパイル、およびstyleguideの生成を行います。 エラーがあればコンソールに出ます。
その他の npm スクリプト、gulp タスクは package.json, gulpfile を読んで下さい。
外部ライブラリ(npm)の追加
gulp/にて
$ npm i --save-dev なにか必ず--save-devをつけてください（これで、自動的にpackage.jsonに記述されます）。
Usage (Sass)
sassのビルドに は node-sassを、Sassライブラリにはnode-bourbonを使用しています。
http://sass-lang.com/
http://bourbon.io/
- Bourbon入れているので色々便利なことができます
- minifyもしています
npm run build:styleguideでStyleGuideも生成します
Usage (StyleGuide)
hologramを使用しています。
http://whiskers.nukos.kitchen/2014/12/25/gulp-hologram.html
システムワイドに bundler をインストールして bundler コマンドをインストールして、 gulp ディレクトリで bundle install して下さい。
StyleGuideのレイアウトは変えてしまって大丈夫です。
doc_assets/にHTMLレイアウトが、code_example_templates/にコード用のテンプレートがいて、docs/cssにStyleGuide自体のcssがいますので、その辺をいじってください。
スタイルガイドを閲覧するには、 gulp ディレクトリをドキュメントルートとして、適当な HTTPサーバーを立てて、 http://localhost/docs/index.html を開いて下さい。
テストコード実行
- ディレクトリ移動
$ cd ~/www/lancers/gulp- karmaでのテスト実行
$ npm run testk- mochaでのテスト実行
$ npm run testm開発ルール
lancers.js は npm run dev 時はミニファイしていません。これは開発時のブラウザコンソールでのデバッグ情報をより多く出すためです。
*.min.css を更新したときは、
npm run rev-updateを叩いてクエリストリングのハッシュを更新してください。
キャッシュバスティング用のnpm-script
webroot配下のHTMLや、twigテンプレートで作成されたviewファイルは、キャッシュバスティング機能のあるLHtmlHelperを使用することができません。 そのため、呼び出しURLのクエリストリングに、md5で生成したハッシュを手元で付与することでキャッシュを更新しています。
npm run rev-updateを叩くと、自動でHTML/twigテンプレートから呼ばれたアセットファイルを全て取得し、それぞれハッシュを作成し、HTMLに記載されたパスを全て自動で更新します。
<link rel="stylesheet" href="/lancer/css/common.css?v=abe19df219">common.cssを変更した後 npm run rev-update を叩く↓
<link rel="stylesheet" href="/lancer/css/common.css?v=dmgj2jkf8v">デプロイ向けのコマンド
npm run build-min-files-for-prodで、production 環境としてミニファイした JS と CSS を生成します。これはデプロイサーバーでテスト通過後に実行するという用途を想定しています。