CakePHP3にcakephp3-elixirを導入しSassやJavaScriptのコンパイル・ビルド環境を構築する
- 公開日
- カテゴリ：CakePHP
- タグ：PHP,JavaScript,Build,sass,AMP,CakePHP,cakephp3-elixir,Compile
CakePHP のような PHP フレームワークを使って Web アプリケーションを構築する際にフロントエンド側で sass や less などを使って CSS を作成していく事は今や当たり前になってきました。 webpack などを手動で導入しても良いのですが、今回は気軽に素早く環境を導入できる「cakephp3-elixir 」というパッケージを使って Sass や JavaScript のコンパイル環境を構築したいと思います。
Contents
開発環境
今回の開発環境は以下の通りです。
- Linux CentOS 7
- Apache 2.4
- PHP 7.1
- CakePHP 3.5
尚、CakePHP のルートディレクトリを「cakephp/」とします。
node.js と npm の環境構築
cakephp3-elixir パッケージの導入には Node.js と NPM が必要なので、インストールされているか確認します。以下のコマンドを叩いて確認します。
# node.js のバージョン確認
node -v
# 実行結果
[demo@localhost ~]# node -v
v8.9.4
# npm のバージョン確認
npm -v
# 実行結果
[demo@localhost ~]# npm -v
5.6.0
バージョンが表示されれば導入済みとなります。バージョンが表示されない場合はインストールされていないので導入を行います。
node.js のインストール
推奨版である node.js 8.x をインストールしていきます。ちなみに、node.js をインストールすれば npm も一緒に入ります。
以下のコマンドを叩いてリポジトリを追加します。
# node.js 8.x のリポジトリ追加
curl -sL https://rpm.nodesource.com/setup_8.x | bash -
## 実行結果
[demo@localhost ~]# curl -sL https://rpm.nodesource.com/setup_8.x | bash -
## Installing the NodeSource Node.js 8.x repo...
## Inspecting system...
+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m
## Confirming "el7-x86_64" is supported...
+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Downloading release setup RPM...
+ mktemp
+ curl -sL -o '/tmp/tmp.c4ii5u2TMq' 'https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Installing release setup RPM...
+ rpm -i --nosignature --force '/tmp/tmp.c4ii5u2TMq'
## Cleaning up...
+ rm -f '/tmp/tmp.c4ii5u2TMq'
## Checking for existing installations...
+ rpm -qa 'node|npm' | grep -v nodesource
## Run `yum install -y nodejs` (as root) to install Node.js 8.x and npm.
## You may also need development tools to build native addons:
## `yum install -y gcc-c++ make`
そして、以下のコマンドで node.js 8.x をインストールします。
# node.js 8.x のインストール
yum install -y nodejs gcc-c++ make
## 実行結果
[demo@localhost ~]# yum install -y nodejs gcc-c++ make
.
.
省略
.
.
Total download size: 17 M
Installed size: 51 M
Downloading packages:
nodejs-8.9.4-1nodesource.x86_64.rpm | 17 MB 00:00:00
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
Installing : 2:nodejs-8.9.4-1nodesource.x86_64 1/1
Verifying : 2:nodejs-8.9.4-1nodesource.x86_64 1/1
Installed:
nodejs.x86_64 2:8.9.4-1nodesource
Complete!
これで node.js と npm のインストールは完了です。再度バージョン確認のコマンドを叩くとバージョンが表示されます。
Gulp の導入
cakephp3-elixir の導入の前に、必要な事前準備を行います。
Elixir は Gulp の上に構築されているので、先に Gulp をグローバル npm パッケージとしてインストールします。以下のコマンドを叩きます。
# Gulp のインストール
npm install --global gulp-cli
## 実行結果
[demo@localhost ~]# npm install --global gulp-cli
/usr/bin/gulp -> /usr/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@2.0.1
added 253 packages in 5.416s
cakephp3-elixir の導入
それではいよいよ cakephp3-elixir の導入を行っていきます。
まずは、cakephp/ 配下に package.json を手動で作成し、以下のように記述を行います。
- cakephp/package.json
-
{ "name": "cakephp", "version": "0.0.1", "dependencies": {}, "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "cakephp3-elixir": "^1.0.5", "laravel-elixir-del": "^0.1.1", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.16.2" } }
package.json の用意が出来たら、インストールを行います。以下のコマンドを叩きます。
## cakephp3-elixir と依存パッケージのインストール
# 通常
npm install
# Windows や仮想環境などの場合は no-bin-links オプションをつける
npm install --no-bin-links
仮想環境の場合は no-bin-links オプションをつけます。
インストールが完了すると、以下のディレクトリとファイルが出来上がります。
- cakehp/node_modules
- Node モジュールの格納場所
- cakehp/resources
- sass, less, js などのソースを設置する場所
- cakehp/elixir.json
- Elixir の設定ファイル
- cakehp/gulpfile.js
- Elixir でビルドなどを行うファイルを指定するファイル
- cakehp/src/View/Helper/ElixirHelper.php
- バージョン管理を提供するために使われる CakePHP ヘルパー
これでインストールは完了です。
コンパイルコマンドについて
コンパイルを行う際は Gulp コマンドを叩きますが、以下の３つがあります。
- gulp
- コンパイルを行う
- gulp --production
- コンパイル＆ minify を行う
- gulp watch
- コンパイル対象にあるファイルが変更されると自動的に再コンパイルを行う
コンパイルの設定を行ったら、上記のコマンドでソースをコンパイルしていく事になります。
sass コンパイル環境構築
cakephp3-elixir の導入が完了したので、実際にコンパイルしていく設定を行っていきます。
コンパイル設定
cakehp/resources/assets 配下に build ディレクトリを作成します。
cakephp
├─ resources
│ └─ assets
│ ├─ build
cakehp/resources/assets/sass 配下に test1.scss test2.scss の２つを作成します。
cakephp
├─ resources
│ └─ assets
│ ├─ sass
│ │ ├─ test1.scss
│ │ └─ test2.scss
- cakehp/resources/assets/sass/test1.scss
-
h1 { font-size: 14px; }
- cakehp/resources/assets/sass/test2.scss
-
h2 { font-size: 12px; }
gulpfile.js を以下のように記述します。
- cakehp/gulpfile.js
-
elixir(mix => { mix .sass('test1.scss', 'resources/assets/build/css') .sass('test2.scss', 'resources/assets/build/css') .styles( [ '../build/css/test1.css', '../build/css/test2.css' ], 'webroot/css/app.css' ); });
コンパイル実施
コンパイルの設定を行ったので、実際にコンパイルしてみます。 CakePHP のルートディレクトリへ移動し、以下の gulp コマンドを叩きます。
# CakePHP のルートディレクトリへ移動する
cd /path/to/cakephp
# gulp で sass をコンパイルする
gulp
# 実行結果
[demo@localhost cakephp]# gulp
[23:07:06] Using gulpfile /var/www/html/cakephp/gulpfile.js
[23:07:06] Starting 'all'...
[23:07:06] Starting 'sass'...
[23:07:06] Finished 'sass' after 367 ms
[23:07:06] Starting 'sass'...
[23:07:06] Finished 'sass' after 9.88 ms
[23:07:06] Starting 'styles'...
[23:07:06] Finished 'styles' after 9 ms
[23:07:06] Finished 'all' after 389 ms
[23:07:06] Starting 'default'...
┌──────────────┬──────────────────────────┬───────────────────┐
│ Task │ Summary │ Source Files │ Destination │
├──────────────┼──────────────────────────┼───────────────────┤
│ mix.sass() │ 1. Compiling Sass │ resources/assets/sass/test1.scss │ resources/assets/build/css/test1.css │
│ │ 2. Autoprefixing CSS │ │ │
│ │ 3. Concatenating Files │ │ │
│ │ 4. Writing Source Maps │ │ │
│ │ 5. Saving to Destination │ │ │
├──────────────┼──────────────────────────┼───────────────────┤
│ mix.sass() │ 1. Compiling Sass │ resources/assets/sass/test2.scss │ resources/assets/build/css/test2.css │
│ │ 2. Autoprefixing CSS │ │ │
│ │ 3. Concatenating Files │ │ │
│ │ 4. Writing Source Maps │ │ │
│ │ 5. Saving to Destination │ │ │
├──────────────┼──────────────────────────┼───────────────────┤
│ mix.styles() │ 1. Concatenating Files │ resources/assets/build/css/test1.css │ webroot/css/app.css │
│ │ 2. Writing Source Maps │ resources/assets/build/css/test2.css │ │
│ │ 3. Saving to Destination │ │ │
└──────────────┴──────────────────────────┴───────────────────┘
[23:07:06] Finished 'default' after 3.64 ms
resources/assets/build/css 配下に test1.css と test2.css が生成されます。
cakephp
├─ resources
│ └─ assets
│ ├─ build
│ │ └─ css
│ │ ├─ test1.css
│ │ ├─ test1.css.map
│ │ ├─ test2.css
│ │ └─ test2.css.map
webroot/css 配下に app.css が生成されます。
cakephp
├─ webroot
│ ├─ css
│ │ ├─ app.css
│ │ ├─ app.css.map
コンパイル処理としては、resources/assets/build/css 配下に css ファイルとして出力された後、それらをまとめた app.css が webroot/css 配下に出力される。という流れになります。
- webroot/css/app.css
-
h1 { font-size: 14px; } /*# sourceMappingURL=test1.css.map */ h2 { font-size: 12px; } /*# sourceMappingURL=test2.css.map */ /*# sourceMappingURL=app.css.map */
２つの sass ソースが１つにまとまって出力されています。
これで CakePHP3 で sass を扱えるようになりました。
ちなみに、コンパイル時に一旦 scss ファイルをまとめずにそれぞれを css ファイルへとビルドしていますが、直接１つのファイルにまとめて出力する事もできます。その場合は以下のように設定します。
elixir(mix => {
mix
.sass([
'test1.scss',
'test2.scss',
], 'webroot/css/test12.css');
});
これで、複数の scss ファイルが 1 つ CSS へコンパイルされ、直接 webroot へ出力されます。
コンパイルの流れは好き好きですが、わざわざ分けたのは案件によってはこれらの分けられた CSS ファイルが再利用できるので便利だからです。 AMP とかに対応させるなら一旦分ける事を強くお奨めします。
Laravel で AMP ページを作成するベストプラクティス
Laravel で AMP ページを作成する実践編～ AMP とは？基本を添えた実装入門～
上記は Laravel の記事ですが、SCSS コンパイル時に一旦別 CSS への出力を行う事の利点を紹介しています。
JavaScript ビルド環境構築
続いて、Javascript のビルド設定を行います。
ちなみにここでは、簡単な JS ファイルを連結させて 1 つのファイルとして webroot へ出力するので、コンパイルではなくビルドと呼びます。
ビルド設定
cakehp/resources/assets/js 配下に test1.js test2.js の２つを作成します。
cakephp
├─ resources
│ ├─ assets
│ ├─ js
│ │ ├─ test1.js
│ │ └─ test2.js
- cakehp/resources/assets/js/test1.js
-
console.log('test1');
- cakehp/resources/assets/js/test2.js
-
console.log('test2');
gulpfile.js を以下のように記述します。
- cakehp/gulpfile.js
-
elixir(mix => { mix .sass('test1.scss', 'resources/assets/build/css') .sass('test2.scss', 'resources/assets/build/css') .styles( [ '../build/css/test1.css', '../build/css/test2.css' ], 'webroot/css/app.css' ) .scripts([ 'test1.js', 'test2.js' ], './webroot/js/test12.js' ); });
.scripts() の部分が JS の記述になります。まとめる対象のファイルを配列で第一引数に渡し、出力するファイルパスを第二引数に渡しています。
ビルド実施
それでは JavaScript ファイルをビルドします。 cakephp のルートディレクトリへ移動し、gulp コマンドを叩きます。
# CakePHP のルートディレクトリへ移動する
cd /path/to/cakephp
# scss のコンパイルと JS のビルドを行う
gulp
# 実行結果
[demo@localhost cakephp]# gulp
[20:17:15] Using gulpfile /var/www/html/cakephp/gulpfile.js
[20:17:15] Starting 'all'...
[20:17:15] Starting 'sass'...
[20:17:19] Finished 'sass' after 3.04 s
[20:17:19] Starting 'sass'...
[20:17:19] Finished 'sass' after 116 ms
[20:17:19] Starting 'styles'...
[20:17:19] Finished 'styles' after 8.59 ms
[20:17:19] Starting 'scripts'...
[20:17:19] Finished 'scripts' after 59 ms
[20:17:19] Finished 'all' after 3.33 s
[20:17:19] Starting 'default'...
┌───────────────┬──────────────────────────┬───────────────────┐
│ Task │ Summary │ Source Files │ Destination │
│ mix.sass() │ 1. Compiling Sass │ resources/assets/sass/test1.scss │ resources/assets/build/css/test1.css │
│ │ 2. Autoprefixing CSS │ │ │
│ │ 3. Concatenating Files │ │ │
│ │ 4. Writing Source Maps │ │ │
│ │ 5. Saving to Destination │ │ │
├───────────────┼──────────────────────────┼───────────────────┤
│ mix.sass() │ 1. Compiling Sass │ resources/assets/sass/test2.scss │ resources/assets/build/css/test2.css │
│ │ 2. Autoprefixing CSS │ │ │
│ │ 3. Concatenating Files │ │ │
│ │ 4. Writing Source Maps │ │ │
│ │ 5. Saving to Destination │ │ │
├───────────────┼──────────────────────────┼───────────────────┤
│ mix.styles() │ 1. Concatenating Files │ resources/assets/build/css/test1.css │ webroot/css/app.css │
│ │ 2. Writing Source Maps │ resources/assets/build/css/test2.css │ │
│ │ 3. Saving to Destination │ │ │
├───────────────┼──────────────────────────┼───────────────────┤
│ mix.scripts() │ 1. Concatenating Files │ resources/assets/js/test1.js │ ./webroot/js/test12.js │
│ │ 2. Writing Source Maps │ resources/assets/js/test2.js │ │
│ │ 3. Saving to Destination │ │ │
└───────────────┴──────────────────────────┴───────────────────┘
[20:17:19] Finished 'default' after 36 ms
webroot/js 配下に test12.js が生成されます。
- webroot/js/test12.js
-
console.log('test1'); console.log('test2'); //# sourceMappingURL=test12.js.map
これで CakePHP3 で JavaScript のビルド環境が整いました。
まとめ
以上で作業は完了です。
今回は扱っていませんが、cakephp3-elixir では webpack も扱えるので ES6 のコンパイルも行えます。
そして実際にこのパッケージをダウンロードしてソースを覗いた方は気が付くと思いますが、元は Laravel-Elixir です。これを CakePHP3 で使えるようにしたパッケージになります。なので、Laravel を使っている人は記法がほぼ同じなのでかなりとっつきやすいライブラリになっています。
手っ取り早くコンパイル環境を構築するには良いパッケージなので、是非試してみてください。
