❤
npm
Sign UpSign In

lancers-clientside

0.0.1 • Public • Published

ブラウザ側アプリ関連資料

このディレクトリ以下はクライアントサイドのビルドに用いられるために使用します。 ビルド後の生成物については、/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 login

user, 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 を生成します。これはデプロイサーバーでテスト通過後に実行するという用途を想定しています。

Readme

Keywords

none

Package Sidebar

Install

npm i lancers-clientside

Weekly Downloads

5

Version

0.0.1

License

none

Last publish

Collaborators

  • lancers_dev
Try on RunKit
Report malware