2018/08/28
Webサイトの構築を快適にしようと思ったら Laravel 以外にもフロントエンドツールをインストールしておく必要があります。
フロントエンドツールに関しては、Laravel のインストール時にやっておくといいかもしれません。
今回は Laravel を使う上でよく利用されるフロントエンドツールについてエントリーします。
Node.js（ノードジェイエス）
サーバーサイドの JavaScript 環境です。多くのライブラリが開発・公開されています。後述の npm (Node Package Manager) を使ってライブラリのインストールなどを管理します。
Windows と Mac にはインストーラが用意され、Linux用にはソースコードが提供されています。
node.js / npm のインストール方法（Windows用インストーラー）
後述する Laravel Elixir（Laravel Mix）や Gulp 、Bower を利用するなら Node.js をインストールしておく必要があります。
Sass（サス）
これまで、CSSは素で style.css のようなファイルにスタイルを書く方法が主流でした。ですが、CSSだけで書いていると、どうも拡張性や保守性に欠けたりします。
そこで、メタ言語と呼ばれる CSS をよりプログラミングに近い形で書ける言語が出てきました。
Sass とは CSS にプログラミングの機能を持ち込だものです。
Laravel Elixir（エリクサー：万能薬）
Laravel 用に作られた Gulp タスク群です。後述する Gulp というタスク管理ツールをベースとしています。Gulp を Laravel で使いやすくするためにラッピングしたツールが Elixir です。
Laravel5.4 のリリースに合わせて現在は「Laravel Mix」と名称が変わりました。
以下のようなタスクを自動で実行できます。
- CSSの拡張言語であるLessやSassをCSSに変換する
- CoffeScript を JavaScript に変換する
- 複数のファイルを１ファイルに結合する
- ファイルをミニファイする（余計な空白や改行を削るなどしてサイズを圧縮する）
- ファイルの変更を監視してタスクを実行する
- CSSやJavaScriptのファイル名にバージョンを付与する
Node.js と gulp をインストールした上で、Elixir をインストールする必要があります。
Laravel Elixir の使い方（Sassのコンパイル編）
Gulp（ガルプ）
Node.js を使ったタスク自動化ツールです。決まった動作（タスク）を定義し、それを実行する機能です。
いつもやる作業の自動化をGulpを使ってやります。
Gulpを使うと
- Sassのコンパイルを自動化
- 画像を圧縮
- cssやJavaScriptファイルの圧縮
などが、自分で決める命令で実行できるようになります。
「Gulp」のインストールは「npm」から行うことになります。
$ npm install -g gulp
npm（エヌピーエム）
JavaScript 系のパッケージを管理するツールです。
必要とするパッケージをインストールする際、依存するパッケージもまとめてインストールしてくれます。
Node.js をインストールすると同時に npm もインストールされます。
「jQuery」などのように「npm」、「bower」どちらにも提供されているものも存在しています。
Bower（バウワー）
クライアントサイド（画像、CSS、JavaScript）のパッケージを管理ツールです。
JavaScript や CSS、HTML などについて依存関係を管理してくれます。
Twitter 社が開発＆提供しています。
「bower」のインストールは「npm」から行うことになります。
$ npm install bower -g
ただ、当面の間メンテナンスは続けられるようです。
以上です。
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。