Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

gitその0001-04 git rebase入門 ブランチを統合する

参考にさせて頂いたページ

Git - リベース

はじめに

公式ドキュメントからの引用ですが。

Git には、あるブランチの変更を別のブランチに統合するための方法が大きく分けて二つあります。merge と rebase です。

ということで、mergeとrebaseについて少しやってみようと思います。

vimの操作方法についてはこのページでは細かくは触れません。

gitのコミットidはご自身の環境として読み替えてください。

準備

以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。

mergeコマンドでの統合をやってみる

記事タイトルがrebase入門ですが、まずmergeコマンドからやってみます。

hogeブランチのログを表示してみる

以下のコマンドを実行して、hogeブランチのログを表示してみます。

git checkout hoge
git log --oneline

以下のように表示されました。

3d16339 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

masterブランチのログを表示してみる

作業ブランチをmasterに切り替えて、masterブランチのログを表示してみます。

git checkout master
git log --oneline

以下のように表示されました。

1a35929 sample_2.txt 1行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

mergeコマンドで統合してみる

現在の作業ブランチがmasterの状態で、以下のように統合したいブランチを指定します。

git merge hoge

以下のように表示されます。
マージコミットのメッセージ編集ができますが、このままにしておきます。

Merge branch 'hoge'

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

このまま:wqします。 以下のように表示されました。

Merge made by the 'recursive' strategy.
 sample.txt | 3 +++
 1 file changed, 3 insertions(+)

統合されたログを確認してみます。

git log --oneline

以下のように表示されました。

c501ee7 Merge branch 'hoge'
1a35929 sample_2.txt 1行目を追加
3d16339 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

コミットを実行した日時の順に統合されて、それぞれのコミットidに変化が無いことがわかります。
また、マージコミットが新たに追加されたことがわかります。

ブランチ一覧を確認してみます。

git branch 

以下のように表示されました。

  hoge
* master

統合前の状態に戻す

rebaseコマンドによる統合をしたいので、mergeコマンドを実行する前の状態に戻します。

以下のコマンドで、git操作履歴を表示します。

git reflog

以下のように表示されました。

c501ee7 HEAD@{0}: merge hoge: Merge made by the 'recursive' strategy.
1a35929 HEAD@{1}: checkout: moving from hoge to master
3d16339 HEAD@{2}: checkout: moving from master to hoge

~以下略~

ブランチ統合直前の状態にもどしたいので、以下のコマンドを実行して、HEAD@{1}に戻します。

git reset --hard HEAD@{1}

以下のコマンドを実行して、masterブランチのログを確認してみます。

git log --oneline

以下のように表示されました。

1a35929 sample_2.txt 1行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

masterブランチが統合前の状態に戻ったことが確認できました。

rebaseコマンドでの統合をやってみる

rebaseコマンドでの統合をやってみます。

hogeブランチのログを表示してみる

以下のコマンドを実行して、hogeブランチのログを表示してみます。

git checkout hoge
git log --oneline

以下のように表示されました。

3d16339 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

rebaseコマンドで統合してみる

現在の作業ブランチがhogeの状態で、以下のように統合したいブランチを指定します。
mergeコマンドを実行するときとは逆です。

git rebase master

以下のように表示されます。
rebaseの場合は統合コミットは作成されず以下のように表示されます。

First, rewinding head to replay your work on top of it...
Applying: 4行目を追加
Applying: 5行目を追加
Applying: 6行目を追加

hogeブランチのコミットログを表示してみます。

git log --oneline

以下のように表示されました。

d97b9dd 6行目を追加
cb0d079 5行目を追加
35f9c3b 4行目を追加
1a35929 sample_2.txt 1行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

masterブランチでコミットされていた以下のコミットに、hogeブランチでコミットされた4~6行目の変更が適用されたのがわかります。
このときmergeと違うのは、4~6行目のコミットidが変化していて、masterの後ろに履歴が追加される点です。

masterブランチで行った変更と、hogeブランチで行った変更とが交互に並んだりすることなく、ブランチ毎の作業のまとまりが見やすくなったりします。

ブランチ一覧を確認してみます。

git branch 

以下のように表示されました。

* hoge
  master

公開リポジトリにプッシュしたコミットをリベースしてはいけない

以下のページからの引用になります。

公開リポジトリにプッシュしたコミットをリベースしてはいけない

Git - リベース

同じ編集内容にもかかわらず、C4C4'の異なるコミットidが存在することになり、コンフリクトしたり混乱を招くことになる。ということについて書かれています。

rebaseに限らずコミットidが変化してしまうコマンドは、公開リポジトリにプッシュしたコミットに使用してはいけないということになります。

記事中でresetを使用していますが、resetも公開リポジトリにプッシュしたコミットに使用してはいけないということになります。

gitその0001-03 git rebase入門 いくつか前のコミットメッセージを修正する

はじめに

いくつか前のcommitメッセージを修正する方法について書いています。

vimの操作方法についてはこのページでは細かくは触れません。

gitのコミットidはご自身の環境として読み替えてください。

git commit –amend についても触れません。

準備

以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。

hogeブランチで作業してみます。

git checkout hoge

2つ前と3つ前のコミットメッセージを修正する

例として、HEADから3回分のコミットが対象範囲なので、以下のようにコマンドを実行します。

git rebase -i HEAD~3

以下のような感じで、対象となるコミット一覧と、操作の説明が表示されます。 このとき表示されるコミット一覧は一番下が一番新しいコミットです。

pick 356d95e 4行目を追加
pick e3e9b30 5行目を追加
pick fabb554 6行目を追加

# Rebase 97029ec..fabb554 onto 97029ec (3 command(s))
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
# d, drop = remove commit
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

操作の説明が表示されていますが、今回使用するのはrewordです。
コミット一覧のpickと書いてあるところをINSERTモードで、rにします。
pickになっているものは、変更を加えず使用されます。
今回は例として、二つのコミットメッセージを修正します。

r 356d95e 4行目を追加
r e3e9b30 5行目を追加
pick fabb554 6行目を追加

# Rebase 97029ec..fabb554 onto 97029ec (3 command(s))
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
# d, drop = remove commit
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

コマンドモードに戻して:wqです。

しばらく待つと自動的に以下のような表示になりますので、コミットメッセージを編集します。

4行目を追加

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Fri Aug 4 19:14:05 2017 +0900
#
# interactive rebase in progress; onto 97029ec
# Last command done (1 command done):
#    r 356d95e 4行目を追加
# Next commands to do (2 remaining commands):
#    r e3e9b30 5行目を追加
#    pick 3d16339 6行目を追加
# You are currently editing a commit while rebasing branch 'hoge' on '97029ec'.
#
# Changes to be committed:
#       modified:   sample.txt
#

編集が済んだら、コマンドモードに戻って:wqです。

しばらく待つと自動的にまた同じような表示になりますので、コミットメッセージを編集します。

rにした全てのコミットメッセージを編集し終えて、以下のような感じで表示されたら成功です。

[detached HEAD bc2580e] 4行目を追加 編集メッセージ
 Date: Fri Aug 4 19:14:05 2017 +0900
 1 file changed, 1 insertion(+)
[detached HEAD 12cffc6] 5行目を追加 編集メッセージ
 Date: Fri Aug 4 19:15:19 2017 +0900
 1 file changed, 1 insertion(+)
Successfully rebased and updated refs/heads/hoge.

コミットメッセージが修正できたか確認してみる

以下のコマンドを実行してみます。

git log --oneline

以下のように編集されたのが確認できました。

721d841 6行目を追加
12cffc6 5行目を追加 編集メッセージ
bc2580e 4行目を追加 編集メッセージ
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

gitその0001-02 git rebase入門 commitをまとめる

参考にさせて頂いたページ

はじめに

commitをまとめる方法について書いています。

vimの操作方法についてはこのページでは細かくは触れません。

gitのコミットidはご自身の環境として読み替えてください。

準備

以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。

hogeブランチで作業してみます。

git checkout hoge

4行目、5行目、6行目のコミットをまとめる

例として、HEADから3回分のコミットをまとめるので以下のようにコマンドを実行します。

git rebase -i HEAD~3

以下のような感じで、対象となるコミット一覧と、操作の説明が表示されます。
このとき表示されるコミット一覧は一番下が一番新しいコミットです。

pick 356d95e 4行目を追加
pick e3e9b30 5行目を追加
pick fabb554 6行目を追加

# Rebase 97029ec..fabb554 onto 97029ec (3 command(s))
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
# d, drop = remove commit
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

操作の説明が表示されていますが、今回使用するのはsquashです。

コミット一覧のpickと書いてあるところをINSERTモードで、sにして以下のようにします。
sにしたものは、ひとつ古いコミットとまとめられます。
pickになっているものは、変更を加えず使用されます。

pick 356d95e 4行目を追加
s e3e9b30 5行目を追加
s fabb554 6行目を追加

コマンドモードに戻して:wqです。

しばらく待つと自動的に以下のような表示になりますので、コミットメッセージを編集します。

# This is a combination of 3 commits.
# The first commit's message is:
4行目を追加

# This is the 2nd commit message:

5行目を追加

# This is the 3rd commit message:

6行目を追加

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Fri Aug 4 19:14:05 2017 +0900
#
# interactive rebase in progress; onto 97029ec
# Last commands done (3 commands done):
#    s e3e9b30 5行目を追加
#    s fabb554 6行目を追加
# No commands remaining.
# You are currently editing a commit while rebasing branch 'hoge' on '97029ec'.
#
# Changes to be committed:
#       modified:   sample.txt
#

INSERTモードにして、例えば以下のような感じで、コミットメッセージを変更します。

# This is a combination of 3 commits.
# The first commit's message is:
4行目、5行目、6行目を追加

# This is the 2nd commit message:


# This is the 3rd commit message:


# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Fri Aug 4 19:14:05 2017 +0900
#
# interactive rebase in progress; onto 97029ec
# Last commands done (3 commands done):
#    s e3e9b30 5行目を追加
#    s fabb554 6行目を追加
# No commands remaining.
# You are currently editing a commit while rebasing branch 'hoge' on '97029ec'.
#
# Changes to be committed:
#       modified:   sample.txt
#

コマンドモードに戻って:wqです。

しばらく待って、以下のように表示されれば成功です。

[detached HEAD 2865e19] 4行目、5行目、6行目を追加
 Date: Fri Aug 4 19:14:05 2017 +0900
 1 file changed, 3 insertions(+)
Successfully rebased and updated refs/heads/hoge.

logとdiffを確認してみる

以下のコマンドを実行して、ログを確認してみます。

git log --oneline

以下のような感じで表示されたと思います。

2865e19 4行目、5行目、6行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

以下のコマンドを実行して、HEADのひとつ前とHEADのdiffを確認してみます。

git diff HEAD^ HEAD

コミットがまとめられて、4行目、5行目、6行目が追加されたのがわかります。

まとめる前の状態に戻す

次の練習のためにrebaseする前の状態に戻してみます。

以下のコマンドで自分が操作した履歴を見ます。

git reflog

おおよそ以下のような感じで表示されたと思います。

2865e19 HEAD@{0}: rebase -i (finish): returning to refs/heads/hoge
2865e19 HEAD@{1}: rebase -i (squash): 4行目、5行目、6行目を追加
f090b18 HEAD@{2}: rebase -i (squash): # This is a combination of 2 commits.
356d95e HEAD@{3}: rebase -i (start): checkout HEAD~3
fabb554 HEAD@{4}: commit: 6行目を追加

“6行目を追加"のコミットをした直後の状態に戻すので、以下のコマンドを実行します。

git reset --hard HEAD@{4}

以下のように表示されて、コミットをまとめる前の状態に戻ったと思います。

HEAD is now at fabb554 6行目を追加

一応以下のコマンドでログを確認してみます。

git log --oneline

まとめる前の状態にもどりましたので以下のように表示されました。

fabb554 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

いくつか前のコミットだけをまとめる

最新の6行目を追加のコミットはそのままにして、4行目を追加と5行目を追加のコミットだけをまとめる方法をやってみます。

例として、今回もHEADから3回分のコミットが対象になるので以下のようにコマンドを実行します。

git rebase -i HEAD~3

さきほどと同じように以下のように表示されます。

pick 356d95e 4行目を追加
pick e3e9b30 5行目を追加
pick fabb554 6行目を追加

“4行目を追加"と"5行目を追加"をまとめたいので、以下のようにpickをsに変更します。
sにしたものは、ひとつ古いコミットとまとめられます。

pick 356d95e 4行目を追加
s e3e9b30 5行目を追加
pick fabb554 6行目を追加

編集が済んだら、コマンドモードに戻って:wqです。

しばらく待つと自動的に以下のような表示になりますので、コミットメッセージを編集します。

# This is a combination of 2 commits.
# The first commit's message is:

4行目を追加

# This is the 2nd commit message:

5行目を追加

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Fri Aug 4 19:14:05 2017 +0900
#
# interactive rebase in progress; onto 97029ec
# Last commands done (2 commands done):
#    pick 356d95e 4行目を追加
#    s e3e9b30 5行目を追加
# Next command to do (1 remaining command):
#    pick fabb554 6行目を追加
# You are currently editing a commit while rebasing branch 'hoge' on '97029ec'.
#
# Changes to be committed:
#       modified:   sample.txt
#

INSERTモードにして、例えば以下のような感じで、コミットメッセージを変更します。

# This is a combination of 2 commits.
# The first commit's message is:

4行目、5行目を追加

# This is the 2nd commit message:


# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Fri Aug 4 19:14:05 2017 +0900
#
# interactive rebase in progress; onto 97029ec
# Last commands done (2 commands done):
#    pick 356d95e 4行目を追加
#    s e3e9b30 5行目を追加
# Next command to do (1 remaining command):
#    pick fabb554 6行目を追加
# You are currently editing a commit while rebasing branch 'hoge' on '97029ec'.
#
# Changes to be committed:
#       modified:   sample.txt
#

コマンドモードに戻って:wqです。

しばらく待って、以下のように表示されれば成功です。

[detached HEAD 7ef5ac4] 4行目、5行目を追加
 Date: Fri Aug 4 19:14:05 2017 +0900
 1 file changed, 2 insertions(+)
Successfully rebased and updated refs/heads/hoge.

logとdiffを確認してみる

以下のコマンドを実行して、ログを確認してみます。

git log --oneline

以下のような感じで表示されたと思います。

97dedd8 6行目を追加
7ef5ac4 4行目、5行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

“6行目を追加"のコミットはそのままに、"4行目を追加"と"5行目を追加"のコミットをまとめることができました。

gitその0001-01 git rebase入門 indexと準備

はじめに

シリーズみたいな感じで、実際にコマンドを実行してみながらrebaseの学習をしていきます。

git rebase -igit rebase --interactiveの略です。
rebaseの様々な機能を対話形式で実行していく便利なオプションです。

rebase入門 index

git rebase入門の準備

今後色々な練習をしていくにあたって、準備作業をしました。

GitHubにremoteリポジトリを作成してcloneする

  • rebase_tutorialという名前で、remoteリポジトリをREADME.md付きで作成します
  • git clone してローカルリポジトリを作成します

sample.txtを新たに作成してaddとcommitする

以下の内容でsample.txtを作成します。

1行目

addしてcommitします。

git add sample.txt
git commit -m "1行目を追加"

同様に、sample.txtを編集して、

  • 2行目を追加してaddとcommitします。
  • 3行目を追加してaddとcommitします。

masterブランチのlogとsample.txtの記述内容

以下のコマンドを実行します。

git log --oneline

この段階でmasterブランチのログは以下のような感じです。

97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

sample.txtの記述内容は以下のような感じです。

1行目
2行目
3行目

masterをpushする

仕事での開発ではmasterに直接pushしないと思いますが、練習なのでpushすることにします。

git push origin master

hogeブランチを作成する

hogeブランチを作成します。

git checkout -b hoge

4~6行目をaddしてcommitする

さきほどと同様に、sample.txtを編集して、

  • 4行目を追加してaddとcommitします。
  • 5行目を追加してaddとcommitします。
  • 6行目を追加してaddとcommitします。

hogeブランチのlogとsample.txtの記述内容

以下のコマンドを実行します。

git log --oneline

この段階でhogeブランチのログは以下のような感じです。

fabb554 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

sample.txtの記述内容は以下のような感じです。

1行目
2行目
3行目
4行目
5行目
6行目

hogeブランチをpushする

hogeブランチをpushします。

git push origin hoge

masterにファイルを追加する

まずcheckoutします。

git checkout master

sample_2.txtを新たに以下の内容で作成して追加します。

sample_2.txt 1行目

add, commit, push します。

git add sample_2.txt
git commit -m "sample_2.txt 1行目を追加"
git push origin master

以下のコマンドを実行して、masterブランチのログを見てみます。

git log --oneline

以下のように表示されました。

1a35929 sample_2.txt 1行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

vagrantその0027 Windows10にvagrant_1.9.7_x86_64.msiでインストールしなおしてvagrant sshまでやってみる

参考にさせて頂いたページ

はじめに

久しぶりにvagrant upしたらエラーが出て起動できませんでしたので、最新版のVirtualBoxVagrantをインストールすることにしました。

今回の環境(インストーラーなど)

以下のとおりインストールしました。

vagrant box add する

以下のコマンドを実行しました。

$ vagrant box add centos/7

以下のように表示されたので、3でenterしました。

1) hyperv
2) libvirt
3) virtualbox
4) vmware_desktop

以下のコマンドでボックスリストを確認しました。

$ vagrant box list

以下のように表示されました。

centos/7             (virtualbox, 1706.02)

ディレクトリを作成してvagrant initする

任意の場所にディレクトリを作成して、vagrant initします。

$ mkdir sample
$ cd sample
$ vagrant init centos/7

vagrant upからsshとかhalt

以下のコマンドを実行します。

$ vagrant up

vagrant up できました。

なんか見慣れないメッセージが出ている

vagrant up したときに以下のように表示されていました。

    default: No guest additions were detected on the base box for this VM! Guest
    default: additions are required for forwarded ports, shared folders, host only
    default: networking, and more. If SSH fails on this machine, please install
    default: the guest additions and repackage the box to continue.

ポートフォワーディングやフォルダ共有などをするには、guest additionsのインストールが必要なようです。

Guest Additionsをインストールする

VagrantのboxのGuest Additionsのアップデート方法 - Qiita

を参考にさせて頂いて、インストールします。

以下のコマンドを実行して、プラグインをインストールします。

$ vagrant plugin install vagrant-vbguest

このプラグインがインストールされた状態で、vagrant reloadを実行するとGuest Additionsがインストールされます。

$ vagrant reload

ポートフォワーディングやフォルダ共有ができるようになったみたいです。

少し動かしてみます。

$ vagrant reload
$ vagrant ssh
$ exit
$ vagrant halt

今回はここまで。

package.jsonのあるディレクトリパスを指定してnpmやyarnなどのコマンドを実行する

参考にさせて頂いたページ

はじめに

CircleCIで自動的に実行されるコマンドで、npm installしたいときに調べました。

2022年追記分

npm

npm install --prefix /path/to/project

yarn

yarn --cwd /path/to/project install

例えば package.json の scripts の lint を実行したいときは以下のような感じ

yarn --cwd ./path/to/project lint

2017年に書いた分

npm installをオプションを付けずに実行したい場合

package.jsonにdependenciesやdevDependenciesが既に記述されている場合です。

例えばsome_projectディレクトリの中にpackage.jsonがある場合は以下のコマンドです。

npm --prefix ./some_project install ./some_project

--save-devなどのオプションを付けて実行したい場合

同じくsome_projectディレクトリの中にpackage.jsonがある場合に、jqueryをインストールするには以下のコマンドです。

npm install --prefix ./some_project --save-dev jquery

JSでテストコードを書く その0003-02 package.jsonをリポジトリのrootに配置せずにCircleCI上でユニットテストを実行する

参考にさせて頂いたページ

package.jsonをroot以外のディレクトリに置いてnpm installする方法について

karmaのconfファイルを指定して--single-runする方法について

circle.ymlの書き方について

package.jsonをrootに配置して良い場合

package.jsonリポジトリのrootに配置して良い場合について先日書きました。

はじめに

前回の記事では、リポジトリのrootにpackage.jsonとかkarma.conf.jsとか色々置いていました。

業務など実際のプロジェクトでは、jsのユニットテストを実行するためだけにpackage.jsonやkarma.confなどを色々とrootディレクトリに追加すると散らかるので、jsのユニットテストに関連するファイルは、frontendディレクトリを作成してこの中に収めようと思います。

前提として、前回書いた以下の記事の続きとして書いていきます。

frontendディレクトリを作成してjsのユニットテスト関連ファイルを全て格納する

まずforntendディレクトリを作成します。

次に./gitと.gitignoreとREADME.mdはそのまま残して、テストに関係するファイルを全てfronendディレクトリに格納します。

以下のような構造になります。

practice_circle_ci_karma/
  ├─.gitignore
  ├─.git/
  │  └─(略)
  ├─README.md
  └─frontend
    ├─karma.conf.js
    ├─package.json
    ├─js/
    │  └─application-xxx.js
    ├─node_modules/
    │  └─(略)
    └─spec/
       └─application.spec.js

circle.ymlの作成

リポジトリのrootにcircle.ymlファイルを作成します。

以下のようになります。

practice_circle_ci_karma/
  ├─.gitignore
  ├─.git/
  │  └─(略)
  ├─circle.yml
  ├─README.md
  └─frontend
    ├─karma.conf.js
    ├─package.json
    ├─js/
    │  └─application-xxx.js
    ├─node_modules/
    │  └─(略)
    └─spec/
       └─application.spec.js

circle.ymlの記述内容

dependencies:
  pre:
    - npm --prefix ./frontend install ./frontend

test:
  pre:
    - ./frontend/node_modules/karma/bin/karma start ./frontend/karma.conf.js --single-run

npm --prefix ./frontend install ./frontendで、frontendディレクトリ内のpackage.jsonの記述内容に基づいて、frontend/node_modulesにパッケージがインストールされます。

./frontend/node_modules/karma/bin/karma start ./frontend/karma.conf.js --single-runでfrontend/karma.conf.jsの記述内容に基づいて、karmaによるユニットテストが実行されます。

.gitignoreのnode_modulesを無視する記述を修正する

node_modulesディレクトリもリポジトリのrootに配置しなくなったので、前回の記述を以下のように修正しました。

*/node_modules

リポジトリをpushして、CircleCIのビルドを実行する

pushします。

circle.ymlに記述されたコマンドが実行されて、前回のようにテスト結果が緑になったら成功です。