phperだってgulp使おうぜ!

Posted: 2014-12-29 23:11 |  PHP全般 javascript 
年末ですね
タイトルがダサいですが、phpを使ってる方でgulpとかよくわからないぜ!
という方向けの入門エントリです

gulpとかGruntって何

gulpやgruntはタスクランナーと呼ばれるもので、
jsとかcssをminify(圧縮)したり、
coffee scriptとかtype scriptをコンパイルしたり
ここ最近といっても数年前からですが、フロントエンドの進化とともに
手作業では時間がかかってたりした作業や、その他色々関連するものをタスクとして登録して
それぞれを自動化させたりするものです

package.json/bower.json/component.json

世間はjson祭りだ!()
phpを触ってる、仕事で使ってるぜ、という方とは切っても切れない
フロントエンドのcssやjs
デザインも上手く出来ないし、デザイナも友達にいないし、
bootstarp使おう!
ちょっとしたjsのライブラリ使いたいナー
明日までにモックのサイトに適当にデザインとかあてといて

っていうシーンはものすごくたくさんあると思います

だがしかし

ライブラリいれたけど、動かないし何か足りないっぽいぞ・・・
なんだよこれ、cssに書かれてる画像のurlがimgだったりimagesだったりするじゃねーか!
sassって何よ・・・
え、jqueryだけじゃ動かないのかコレ!!!


誰もが経験ありますよね
composerがだいぶ普及して(使った事無い人、PEAR捨てましょう)、
ユニットテストや、アプリケーションのバージョンアップだったり、
ライブラリを利用したり便利になりました
というパッケージ管理がフロントエンド側などにもある訳ですね
package.jsonはnpm(node.js)
bower.jsonはbower(cssとかjsとか主にフロントより)
などなど

phpなのにnode.jsとかやだこわい

PHPStormを使っていれば補完が効くのでそもそもビビる事はありませんし、
node.jsも楽しいので是非どうぞ
macの方はbrewでいれたり、windowsはインストーラー、Linuxもパッケージがあるので
どなた様もいますぐ導入できます

前提はこのくらいにして、早速phperっぽく使ってみましょう

テストだ!

テスト書いていない方いませんよね?
composer.jsonで導入してる方はこんな感じのはず
    "require-dev": {
        "phpunit/phpunit": "4.*",
        "satooshi/php-coveralls": "dev-master",
        "facebook/xhprof": "dev-master"
    },
phpstormなどのIDEからだったりコマンドで実行してるはずです
$ ./vendor/bin/phpunit
すでにjenkins等で自動化させてるのであれば、ここからの話は余りメリットがないかもしれませんが
ローカルやいつでもどこでも簡単に自動で実行させたいと思った事はありませんか?

ありますよね

そこでタスクランナーです
Gruntもgulpもどちらでもいいんですが、好みにあって使いやすい方を選んで下さい
最近Gruntからgulpに完全に移行してしまったのでgulpを対象にします
まずはgulpと、あとでbowerについても触れるので入れておきましょう
$ npm install -g gulp
$ npm install -g bower
-gでグローバルですが、グローバルがイヤという方はお使いの環境に合わせてどうぞ
$ gulp -v
$ bower -v
バージョン確認はお好きにどうぞ
次にnpmを使ってphpunitを実行するパッケージなどを入れていきます

composer.jsonに慣れていれば、簡単です ほとんど同じです

package.jsonに下記の様に記述してインストールします
{
    "devDependencies": {
        "gulp": "^3.8.8",
        "gulp-notify": "*",
        "gulp-phpunit": "*"
    }
}
後は同じです
$ npm install
さて、いよいよタスクを登録ですよ
gulpfile.jsを作成して書いていきましょう
'use strict';
var gulp = require('gulp');
var notify = require('gulp-notify');
var phpunit = require('gulp-phpunit');

gulp.task("test",function(){
    gulp.src('tests/*.php')
        .pipe(phpunit())
        .on('error', notify.onError({
            title: "Gulp PHP Unit",
            message: "Error(s) occurred during testing..."
        }))
        .pipe(notify({
            title: "Gulp PHP Unit",
            message: 'Successfully ran test!'
        }));
});

gulp.task('watch',function(){
    gulp.watch(['tests/**/*.php'], ['test']);
});
gulp.taskでタスクを登録していきます
"test"タスクではphpunitを走らせてtestの結果を通知させます
これだけを実行する場合は
$ gulp test
とかで実行する事が出来たり、defaultにしてしまえばgulpだけですね
これじゃコマンド実行してるのとかわらねーよ!
次のタスクはwatchを使ってtests以下のファイルの変更を監視して、
変更があればtestタスクを実行する様に登録しました
$ gulp watch
と打つだけでそこはもう、いつでもどこでも自動テストです
スバラシイ!
下記の辺りも参考にしてみてください 色々ありがたみが分かりますね

Grunt でファイルの変更を watch して PHPUnit を自動実行する(拡張版)
PHPライブラリ開発のためのgulpfileとGruntfile 比較
それ以外にも恩恵がたくさんあるわけですよ

フロントエンドにも使う

前振りにもあった様に、jsなどもタスクでインストールしたりして、
ありがたくなりましょう
bootstapなど入れてみましょう
package.jsonではなくbowerを利用します
    "dependencies": {
        "bootstrap": "*",
        "bootstrap-material-design": "*",
        "react": "0.*",
        "blueimp-file-upload": "9.*",
        "fancybox": "2.*",
        "font-awesome": "*"
    },
こんな感じで色々記述していきます
angular.jsだったりbackbone.jsだったりember.jsだったりなんでもあります
詳しくはbowerで検索してみましょう
ここではReact.jsを導入してます
$ bower install
でこれらがインストールされる訳ですが、
タスクとして登録します
さきほどのgulpfile.jsを使います
var gulp = require('gulp');
var bower = require('gulp-bower');
var clean = require('gulp-clean');
var install = require("gulp-install");

gulp.task('clean', function () {
    gulp.src('public/assets').pipe(clean());
});

gulp.task('setup', ['clean'], function () {
    return gulp.src(['./bower.json']).pipe(install());
});
delとか利用すれば良いんですが、なんとなくgulp-cleanなのは趣味です
cleanタスクは、public/assets配下を一旦空にします
ここに配置するわけです
setupはbower,jsonで指定したものをinstallするわけです
単純な導入はこの程度ですが、このエントリではもっと先に進みます
導入しただけでは、imgとかimagesのパス問題も解決しませんし、
手作業だし、というかassets下に無いし!
それらを一気にやります

再びgulpfile.js
'use strict';
var gulp = require('gulp');
var bower = require('gulp-bower');
var clean = require('gulp-clean');
var gulpFilter = require('gulp-filter');
var install = require("gulp-install");
var mainBowerFiles = require('main-bower-files');
var urlAdjuster = require('gulp-css-url-adjuster');

gulp.task('clean', function () {
    gulp.src('public/assets').pipe(clean());
});

gulp.task('setup', ['clean'], function () {
    return gulp.src(['./bower.json']).pipe(install());
});

gulp.task('bower', ['setup'], function () {
    var jsFilter = gulpFilter('**/*.js');
    var cssFilter = gulpFilter('**/*.css');
    var fontFilter = gulpFilter([
        '**/*webfont*',
        "**/Font*",
        "**/glyphicons-*"
    ]);
    var imageFilter = gulpFilter(['**/*.png', "**/*.gif"]);
    return gulp.src(
        mainBowerFiles({
            paths: {
                bowerDirectory: 'vendor/bower_components',
                bowerrc: '.bowerrc',
                bowerJson: 'bower.json'
            }
        })
    )
        .pipe(jsFilter)
        .pipe(gulp.dest('public/assets/js'))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(gulp.dest('public/assets/css'))
        .pipe(cssFilter.restore())
        .pipe(fontFilter)
        .pipe(gulp.dest('public/assets/fonts'))
        .pipe(fontFilter.restore())
        .pipe(imageFilter)
        .pipe(gulp.dest('public/images'));
});

    gulp.task("replace", function () {
        return gulp.src(
            [
                'public/assets/css/jquery.fancybox.css',
                'public/assets/css/jquery.fileupload-ui.css'
            ])
            .pipe(urlAdjuster({
                replace:  ['../img/', ''],
                prepend: '/images/',
                append: '?version=1'
            }))
            .pipe(gulp.dest('public/assets/css'));
    });


bowerタスクで、インストールしたパッケージにある各種js, css, フォント系, 画像ファイル等を抽出して
指定のディレクトリに配置していきます
ここではその後のreplaceタスクで配置後のファイルから
パス関係を変更していきます
実際に使う時はもうちょっと楽になる様に書きますがこの例では大したものが無いので
分かり易くするとこんな感じで、
面倒くさいものを自動でやらせていきます
main-bower-filesを使うこの例ではbower.jsonにも少し記述します
    "overrides": {
        "font-awesome": {
            "main" : [
                "**/*.min.css",
                "**/Font*",
                "**/*webfont*"
            ]
        },
        "bootstrap-material-design": {
            "main" : [
                "**/*.min.js",
                "**/*.min.css"
            ]
        },
        "bootstrap": {
            "main" : [
                "**/*.min.css",
                "**/glyphicons-*"
            ]
        },
        "jquery": {
            "main" : "**/*.min.js"
        },
        "fancybox": {
            "main": [
                "**/*.pack.js",
                "**/*.css",
                "**/*.png",
                "**/*.gif"
            ]
        },
        "react": {
            "main" : {
                "development": [
                    "**/*.js",
                    "JSXTransformer.js"
                ],
                "production": [
                    "**/*.min.js"
                ]
            }
        },
        "blueimp-file-upload": {
            "main": [
                "**/*.gif",
                "**/*.css",
                "**/*.js"
            ]
        }
    }
対象になるものを記述します
NODE_ENVを見てdevelopmentとproductionで変更する事が出来ます
あとは.bowerrcでcomposerのvendorと同じとこに配置する様にすれば管理が楽チン
.bowerrc
{
    "directory": "vendor/bower_components"
}
これでcssやjsの導入も手間いらず
ライブラリのバージョンアップだったりも簡単ですね
cdn使えば良いやん!とかありますけど、
使えない場合もありますし、楽できるとこは楽して実装に集中!!

 

about ytake

執筆に参加しています


Laravel お役立ち情報

share



このエントリーをはてなブックマークに追加

Categories

laravel 45

DTM 0

music 0

PHP全般 31

0

JAPAN 1

WORLD 1

javascript 4

RDBMS 1

NoSQL 1

NewSQL 1

Recent Posts

Ad

comments powered by Disqus

GitHub

Social Links

Author


クリエイティブ・コモンズ・ライセンス
Yuuki Takezawa 作『Ytake Blog』はクリエイティブ・コモンズ 表示 - 非営利 4.0 国際 ライセンス で提供されています。

© ytake/comnect All Rights Reserved. 2014