Gulp に PHPCS, PHP Lint, PHP-CS-FIXER を登録して、Cloud9 やエディタで快適コーディング

はじめに

PHP のプロフェッショナルな方たちは、ほぼ IDE の PhpStorm を使っているようです。
私も1年ほど自腹を切って、公私共に使いました。PHP エディタからはじまり、Notepad++ で満足していたので、その多機能ぶりはカルチャーショックでした。

PhpStorm は、たいがいのフレームワーク、テンプレートエンジンの構文に対応しており、何でも検索機能もあります。
毎年かかるコストと、メニューが英語ということに問題なければ、 PhpStorm 1本で開発できると思います。
SASS や node.js　系のツールも使えるのでこれに入っていない機能を探すのが難しいくらいです。

さて、最近気になるのが「WebIDE」、Cloud9 などです。

Cloud9 は、開発環境込みで、IDE が使えるので、ブラウザさえ使えれば、どこでも開発ができるという夢のような環境です。
今回は、その環境に php-cs-fixer　や PHPCS を入れて、ローカルの IDE 並みの規約チェック、整形機能を実行してみようというものです。
ちなみに、同じ方法で Windows 環境にも用意できるはずです。
使い慣れたエディタで、規約に基づいた整形や、構文チェックができるということですね。

結果から言いますと、この記事の内容にならえば、以下のお時間でセットアップができます。

• ライブラリのインストール 約3分
• gulpfile.js の設置　コピペするだけ

では、モチベーションがあがった方、もしくは好奇心がくすぐられた方は、先へ押すすみください。

Gulp, Composer で環境セットアップ

まず、npm と、 Composer はセットアップ済みという前提で進めます。
Cloud9 では、どちらも最初から入っています！

以下のコマンドを1行ずつたたいていきます。
タスクランナーの「Gulp」をインストールして、必要なタスクを実行するためのライブラリをインストールします。
それほど急がずに、コピペで進めたところ、Cloud9 では、約3分で終わりました。

npm install gulp -g
gulp -v
npm install gulp --save-dev
npm install gulp-plumber --save-dev
npm install --save-dev gulp-notify
npm install gulp-phpcs --save-dev

composer require --dev "squizlabs/php_codesniffer"
composer global require fabpot/php-cs-fixer
npm install grunt-php-cs-fixer --save-dev
wget https://github.com/FriendsOfPHP/PHP-CS-Fixer/releases/download/v1.11.6/php-cs-fixer.phar -O php-cs-fixer

sudo chmod a+x php-cs-fixer
sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer

npm install --save-dev phplint
npm i -g phplint
npm install --save-dev gulp-phplint

Cloud9 で今しがたたたいたばかりなので、問題ないと思いますが、不具合があればご指摘下さい。
コマンドをたたいて、必要なライブラリを入れるだけです。
途中で何かを聞かれることもなく終わります。

gulpfile.js を設置します

以下の gulpfile.js を設置します。
ディレクトリの指定は、配列で複数指定できますので、お好みで。現状は、gulpfile.js と同階層の php ファイルすべてを対象にしています。
設置できたら、Cloud9 の bash で 「gulp」とたたけば、コードの監視開始です。お疲れ様でした！

gulpfile.js

'use strict';
var gulp = require('gulp');
var phpcs = require('gulp-phpcs'); // コーディング規約チェック
var plumber = require("gulp-plumber"); // エラーハンドリング
var notify = require('gulp-notify');
var phplint = require('gulp-phplint');
var exec = require('child_process').exec;
// PHPL エラーチェック、整形
gulp.task('phpcs', function() {
    return gulp.src(['*.php'])
        // Validate files using PHP Code Sniffer
        .pipe(phpcs({
            bin: 'vendor/bin/phpcs',
            standard: 'PSR2',
            warningSeverity: 0
        }))
        // Log all problems that was found
        .pipe(phpcs.reporter('log'))
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }));
});

// 構文チェック
gulp.task('phplint', function() {
    return gulp.src(['*.php'])
        .pipe(phplint())
        .pipe(phplint.reporter(function(file) {
            var report = file.phplintReport || {};
            if (report.error) {
                console.error(report.message + ' on line ' + report.line + ' of ' + report.filename);
            }
        }));
});

// 監視
gulp.task("watch", function() {
    gulp.watch('*.php', ['phpcs', 'phplint']);
    gulp.watch("*.php").on('change', function(event) {
        var command = "php-cs-fixer fix " + event.path + " --config-file=" + __dirname + "/.php_cs";
        exec(command);
        console.log("execute command: " + command);
    })
});

// デフォルト処理
gulp.task('default', ['watch', 'phpcs', 'phplint']);

あと、やりたいこと

たぶん、できると思いますが、xdebug を入れて、ステップ実行したいですね。
Codeception を入れて、単体テストもしたいです。