下記の記事を実践済みという前提で進めます。
GitHub入門 ~登録編~
GitHub入門 ~利用編~
git入門 ~入門編~
実践
実際に、GitHubとgitコマンドを利用して作業をしていきます。
今回は、下記の流れで進めていきます。
1.GitHubでリポジトリを作成
2.自分のPCにGitHubで作成するディレクトリを作成
を参考にGitHubと自分のPCと連携したディレクトリを作成します。
※私は今回は記事の中で作成した「zerofurotest」ディレクトリを対象に進めていきます。
今回は、GitHubと連携させた「zerofurotest」ディレクトリにGulpを導入していきます。
Gulpの導入に関しては下記の記事をを参照してください。
初めてのコマンドライン=>npmの利用まで
初めてのGulp入門 ~インストール編~
step1
$ cd zerofurotest // すでに対象のディレクトリにいる場合はそのままで大丈夫です。
GitHub入門 ~利用編~で作成したディレクトリに移動します。
step2
$ npm init -y
package.jsonファイルを作成します。
step3
$ npm install gulp -D
npmコマンドを利用してGulpパッケージをインストールしていきます。
step4
$ touch gulpfile.js
Gulpの設定ファイルであるgulpfile.jsを作成する
※gulpfile.jsの中身は記述していなくても問題ありません。
step5
$ git status
現在の状況を確認すると大量のファイルが作成されているはずです。
これはnpmを利用してGulpパッケージをインストールした際にGulpパッケージで利用している様々なパッケージをnpmが自動的にインストールしているからです。
Gulpパッケージのインストールは下記のコマンド1行で完結しますが実際にはインストールしたパッケージが利用している様々なパッケージも同時にインストールされています。
ただ、GitHubでディレクトリを管理していく際はこれらのパッケージのデータは必要ないので除外する必要があります。
除外するには.gitignoreファイルを作成する必要があります。
下記のコマンドを実行してください。
$ touch .gitignore
作成した.gitignoreファイルに下記の内容を貼り付けて保存してください。
# node_modules/を除外
node_modules/
上記の作業が完了後、再度下記のコマンドを実行します。
$ git status
先ほどよりファイル数が大きく減っているはずです。
これは、.gitignoreファイルの設定が効いているからです。
今後も、Gitで管理する必要がないファイルに関しては.gitignoreファイルに記述していくようにしてください。
step6
$ git add .
作成したファイルを「ステージングエリア」に移動
step7
$ git commit -m "pacage.json & gulpfile.jsの作成"
コミットの作成
step8
$ git push origin master
先ほど作成したコミットをGitHubに送る
問題なく処理が進んだ後はご自身のGitHubに移動して先ほどの変更が反映されているかを確認してみましょう。