あじちゃんの備忘録。

〜ここはメモ帳です

Laravel Mixを使おう!

laravel mix とは

一言で言うと、

  • web packの設定を簡単に書くことができるlaravel向けのnpmパッケージ

なのですが。これ言われても意味わかんなかったので噛み砕きます。分かる人は飛ばして。

web packはwebコンテンツを構成するJavaScriptやSassなどのリソースを モジュール と言う単位で取り扱い、
複数のモジュールを1つにまとめたファイルを出力・最適な形に作り変えてくれるツールです。
(例:3つのJavaScriptをまとめて1ファイルの呼び出しで良いようにしてくれる)
ざっくり言うと リソースの依存関係を解消してくれるコンパイラ です。

導入方法

導入にはグローバルインストールとローカルインストールがある。
グローバルインストールはwebpackを利用したいディレクトリ(プロジェクト)以外の 全ての環境に影響を及ぼす ので各自よしなにお願いします。

  • グローバルインストールの場合
cd ~/
npm install webpack -g
  • ローカルインストールの場合
cd [目的のプロジェクトルート]
npm install --save-dev webpack
  • (必要ならば)足りないパッケージを補うため以下のコマンドを実行
npm init -y

使用方法

準備

  • node/npmをインストール(yarnでもOK)
  • Laravel 5.* のプロジェクトを作成
  • npm installを実行

  • プロジェクトルートに「webpack.mix.js」があるのでコンパイルの対象を追加(JSファイルやSassファイルなど)

// mix.js('ビルド元のソースコード', 'ビルド済みファイル出力場所')
// 例
mix.js('resources/assets/js/common.js', 'public/js')
    .js('resources/assets/js/sub.js', 'public/js')
  • viewでの呼び出しを追加
<!-- これで上記2つのjsが読み込まれる -->
<head>
   <script type="text/javascript" src="{{ mix('js/common.js') }}"></script>
</head>

実行

npm run dev

f:id:azix:20180515182735p:plain こんな感じの結果で、 DONE が表示されていたら成功!

  • jsやcssを即時でコンパイルしたい場合(書きながらすぐ反映させたい時)
npm run watch

終わらせるときは ctr + C でOK.

gitで新規リポジトリを作ったときの公式案内の説明

gitではじめてリポジトリ作ったときに、公式サイトに書かれている手順の意味がわからなくて「???」ってなりながらやったことがようやく分かるようになったのでメモ。

まず何が書かれているのか。

これは私のGitアカウントに新しくリポジトリを作ったときの画面です。 f:id:azix:20180514180543p:plain

大きな4つの項目がありますね。

  1. Quick setup — if you’ve done this kind of thing before
  2. …or create a new repository on the command line
  3. …or push an existing repository from the command line
  4. …or import code from another repository

それぞれこんなことが書いてあります

  1. セットアップをしたことあるならさっさとやっちゃおう!+必要情報
  2. コマンドラインから新しいリポジトリを作る方法
  3. コマンドラインから既存のリポジトリをプッシュする方法
  4. 他のリポジトリからコードをインポートする方法

で、解説していきます。1はほかが出来たら「アッソ。」になるので割愛。

2. コマンドラインから新しいリポジトリを作る方法

echo "# ReDarekaDiary" >> README.md
→今いるディレクトリにREADME.mdというファイルを作って底に「””」の中の文を書き込む

git init
→今いるディレクトリにgitのリポジトリを追加する。「.git」というディレクトリができ、この中にGitの管理ファイルが作成される(既存のディレクトリでのリポジトリの初期化)

git add README.md
→コミットするファイルにREADME.mdを追加する

git commit -m "first commit”
→コミットする。 (-m “ここがコミットコメントになる”)

git remote add origin https://github.com/AsahiNakamura/ReDarekaDiary.git
→URLに"origin"という短縮名(ニックネーム)を付ける(.git/config内の「remote」項目に定義される)

git push -u origin master
→originサーバへ今いるディレクトリの中身をデフォルトのブランチとしてアップロード(push)する(-uオプションを付けると次回から「git push」だけでorigin masterでpushしてくれる。)

3.コマンドラインから既存のリポジトリをプッシュする方法

git remote add origin https://github.com/AsahiNakamura/ReDarekaDiary.git
→URLに"origin"という短縮名(ニックネーム)を付ける(.git/config内の「remote」項目に定義される)

git push -u origin master
→originサーバへ今いるディレクトリの中身をデフォルトのブランチとしてアップロード(push)する(-uオプションを付けると次回から「git push」だけでorigin masterでpushしてくれる。)

4.他のリポジトリからコードをインポートする方法

特にコマンドは書かれていないけれど、やることは「リポジトリをクローンする」こと。
コマンドだと git clone [url] を使います。

まとめ

自分で何か作るんだったらだいたい1のやり方だと思うし、チームで何かやるんだったら3が多いんじゃないかなと思います。頑張って覚えるぞ!!