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

公開： 2018年2月28日

カテゴリ： PHP CakePHP
タグ： PHP,JavaScript,Build,sass,AMP,CakePHP,3.5,cakephp3-elixir,Compile

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

アジェンダ

開発環境
node.jsとnpmの環境構築
1. node.jsのインストール
Gulpの導入
cakephp3-elixirの導入
1. コンパイルコマンドについて
sassコンパイル環境構築
1. コンパイル設定
2. コンパイル実施
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コマンドを叩きますが、以下の３つがあります。

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

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

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

開発環境

node.jsとnpmの環境構築

node.jsのインストール

Gulpの導入

cakephp3-elixirの導入

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

sassコンパイル環境構築

コンパイル設定

コンパイル実施

JavaScriptビルド環境構築

ビルド設定

ビルド実施

まとめ

Latest Articles

Popular Articles

Updated Articles

Categories

Archives

Author