環境構築

Laravel でよく使うフロントエンドツール

2018/08/28

Webサイトの構築を快適にしようと思ったら Laravel 以外にもフロントエンドツールをインストールしておく必要があります。

フロントエンドツールに関しては、Laravel のインストール時にやっておくといいかもしれません。

今回は Laravel を使う上でよく利用されるフロントエンドツールについてエントリーします。

 

Node.js(ノードジェイエス)

サーバーサイドの JavaScript 環境です。多くのライブラリが開発・公開されています。後述の npm (Node Package Manager) を使ってライブラリのインストールなどを管理します。

Windows と Mac にはインストーラが用意され、Linux用にはソースコードが提供されています。

後述する 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 に変換する
  • 複数のファイルを1ファイルに結合する
  • ファイルをミニファイする(余計な空白や改行を削るなどしてサイズを圧縮する)
  • ファイルの変更を監視してタスクを実行する
  • CSSやJavaScriptのファイル名にバージョンを付与する

Node.jsgulp をインストールした上で、Elixir をインストールする必要があります。

 

Gulp(ガルプ)

Node.js を使ったタスク自動化ツールです。決まった動作(タスク)を定義し、それを実行する機能です。

いつもやる作業の自動化をGulpを使ってやります。

Gulpを使うと

  • Sassのコンパイルを自動化
  • 画像を圧縮
  • cssやJavaScriptファイルの圧縮

などが、自分で決める命令で実行できるようになります。

POINT!

「Gulp」のインストールは「npm」から行うことになります。


$ npm install -g gulp

 

npm(エヌピーエム)

JavaScript 系のパッケージを管理するツールです。

必要とするパッケージをインストールする際、依存するパッケージもまとめてインストールしてくれます。

Node.js をインストールすると同時に npm もインストールされます。

POINT!

「jQuery」などのように「npm」、「bower」どちらにも提供されているものも存在しています。

 

Bower(バウワー)

クライアントサイド(画像、CSS、JavaScript)のパッケージを管理ツールです。

JavaScript や CSS、HTML などについて依存関係を管理してくれます。

Twitter 社が開発&提供しています。

POINT!

「bower」のインストールは「npm」から行うことになります。


$ npm install bower -g

チェックBower は 正式に Depreciated(非推奨) となりました。
ただ、当面の間メンテナンスは続けられるようです。

 

以上です。

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。

 

-環境構築