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
こんな感じの結果で、 DONE
が表示されていたら成功!
npm run watch
終わらせるときは ctr + C
でOK.
gitで新規リポジトリを作ったときの公式案内の説明
gitではじめてリポジトリ作ったときに、公式サイトに書かれている手順の意味がわからなくて「???」ってなりながらやったことがようやく分かるようになったのでメモ。
まず何が書かれているのか。
これは私のGitアカウントに新しくリポジトリを作ったときの画面です。
大きな4つの項目がありますね。
- Quick setup — if you’ve done this kind of thing before
- …or create a new repository on the command line
- …or push an existing repository from the command line
- …or import code from another repository
それぞれこんなことが書いてあります
- セットアップをしたことあるならさっさとやっちゃおう!+必要情報
- コマンドラインから新しいリポジトリを作る方法
- コマンドラインから既存のリポジトリをプッシュする方法
- 他のリポジトリからコードをインポートする方法
で、解説していきます。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が多いんじゃないかなと思います。頑張って覚えるぞ!!