RitoLabo

CakePHP3にcakephp3-elixirを導入しSassやJavaScriptのコンパイル・ビルド環境を構築する

  • 公開:
  • カテゴリ: PHP CakePHP
  • タグ: PHP,JavaScript,Build,sass,AMP,CakePHP,3.5,cakephp3-elixir,Compile

CakePHPのようなPHPフレームワークを使ってWebアプリケーションを構築する際にフロントエンド側でsassやlessなどを使ってCSSを作成していく事は今や当たり前になってきました。webpackなどを手動で導入しても良いのですが、今回は気軽に素早く環境を導入できる「cakephp3-elixir」というパッケージを使ってSassやJavaScriptのコンパイル環境を構築したいと思います。

アジェンダ
  1. 開発環境
  2. node.jsとnpmの環境構築
    1. node.jsのインストール
  3. Gulpの導入
  4. cakephp3-elixirの導入
    1. コンパイルコマンドについて
  5. sassコンパイル環境構築
    1. コンパイル設定
    2. コンパイル実施
  6. JavaScriptビルド環境構築
    1. ビルド設定
    2. ビルド実施

開発環境

今回の開発環境は以下の通りです。

  • 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.jsモジュールの格納場所
cakehp/resources/
sass/less/jsなどのソースを設置する場所
cakehp/elixir.json
Elixirの設定ファイル
cakehp/gulpfile.js
Elixirでビルドなどを行うファイルを指定するファイル
cakehp/src/View/Helper/ElixirHelper.php
バージョン管理を提供するために使われるCakePHPヘルパー

これでインストールは完了です。

コンパイルコマンドについて

コンパイルを行う際はGulpコマンドを叩きますが、以下の3つがあります。

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 の2つを作成します。

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 SummarySource FilesDestination
├──────────────┼──────────────────────────┼───────────────────┤
mix.sass()1. Compiling Sass resources/assets/sass/test1.scssresources/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.scssresources/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.csswebroot/css/app.css
│ │
2. Writing Source Mapsresources/assets/build/css/test2.css │ │
│ │
3. Saving to Destination │ │ │
└──────────────┴──────────────────────────┴───────────────────┘
[23:07:06] Finished 'default' after 3.64 ms

resources/assets/build/css 配下に test1.csstest2.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 */

2つのsassソースが1つにまとまって出力されています。

これでCakePHP3でsassを扱えるようになりました。

ちなみに、コンパイル時に一旦scssファイルをまとめずにそれぞれをcssファイルへとビルドしていますが、直接1つのファイルにまとめて出力する事もできます。その場合は以下のように設定します。

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 の2つを作成します。

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'...
┌───────────────┬──────────────────────────┬───────────────────┐
TaskSummarySource FilesDestination
│ 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を使っている人は記法がほぼ同じなのでかなりとっつきやすいライブラリになっています。

手っ取り早くコンパイル環境を構築するには良いパッケージなので、是非試してみてください。