2015-01-26（月）第86回 PHP勉強会 フロントエンドだけではなく、phpなどの開発にも取り込んで効率化をはかりましょう！

1. PHP開発で使う
タスクランナー GULP
第86回 PHP勉強会
YUUKI TAKEZAWA
ytake

2. 自己紹介
なまえ: 竹澤 有貴(ytake)
twitter: @ex_takezawa
blog: http://blog.comnect.jp.net
GitHub: https://github.com/ytake
php, node.js, RDBMS, NoSQL, NewSQL
Laravel JPユーザー
Laravel答えないマン
ytake

3. すこしだけLaravel
Laravel5でるでる詐欺
たぶんそろそろベータかすっ飛ばして突然出そう
ファサードあまり使わなくなるよ
使えなくなる訳ではない！
インターフェースを理解してる人としてない人の差がすん
ごい出る
Laravelレシピ日本語版 ver5 用意中
ytake

4. 本日は
PHPの話は
ほとんどしません
ytake

5. ytake

6. フロントエンドも自動化
してますか？
ytake

7. タスクランナー
ご存知ですか？
ytake

8. ytake

9. ytake
覚えてもすぐ新しいものがでるじゃん！

10. と思っていました
少し覚えるだけ
node.jsはトモダチ(ありがとう phpstorm)
angular, backboneなど使う機会が多くなった
React.js便利過ぎた(ブラウザでコンパイル嫌だ
sass, lessとかなんか増えてきた
ytake

11. ytake
どっちが良い、悪いではなくて
単純に好みの話です
なので今日はgulp

12. こんな経験ありませんか？
jsライブラリ落としたら
依存パッケージ足りなくて動かなかった
css, jsフレームワークのバージョンアップが
ついていけない
パスがバラバラで辛い
解決しようと手動でやってたら残業してた
ytake

13. ytake
phpに関わっている以上、
この問題は常に・・・

14. タスクランナー
導入すべし
ytake

15. ytake
フロントエンドはphpよりも進化が早い

16. ytake
node.jsが普及し、
フロントエンドでも使われ始めた

17. ytake

18. bower
フロントエンドパッケージ管理(twitter製)
Yeomanの普及もあり常識的なものに
足りない、動かないからの解放
node.js, bower.json
bower_componentsファイルをvendorに
移動すれば綺麗(.bowerrc設置)
ytake

19. ytake
{
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "*",
"bootstrap": "*",
"react": "*"
}
}

20. ytake
phpのあれと同じ

21. ytake

22. 使うには？
ytake
node.jsインストール
npm install -g gulp
npm install -g bower
package.json

23. ytake
{
"devDependencies": {
"bower": "1.*",
"gulp": "3.*"
}
}
$ npm install

24. タスク書いてみよう
ytake

25. タスクの作り方
ytake
gulpfile.jsに書く
タスク名を付けてその中に書く
よくわからなければサンプル見てみよう
stream云々色々あるので気になったら
調べてみてください(今回はそこまで触れません)
以上

26. ytake
var gulp = require('gulp'),
bower = require('bower’);
!
gulp.task('bower', function () {
return bower.commands.install(
[],
{save: true},
{})
.on('end', function (data) {
console.log(data);
});
});
$ gulp bower

27. インストール後に
所定のディレクトリに配置して
URLのパスをシステムに合わせて書き換えて
圧縮
ytake

28. ytake
gulp.task('publish', ['bower'], 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(urlAdjuster({
replace: ['../fonts/', ''],
prepend: '/assets/fonts/'
}))
.pipe(minifyCSS({keepBreaks:true}))
.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'));
});

29. 少しPHPの開発でも
ありがたくなってきました
ytake

30. ファイルの変更を監視
ytake

31. node.jsの得意分野
ytake
ファイルの変更などを監視してリアルタイムにタス
ク実行
shellもOK
phpunitも実行可能
ブラウザの更新も自動でやらせる
PHPビルトインサーバも必要であれば

32. ytake
gulp.task("phpunit", function () {
var options = {
debug: false,
notify: true
};
return gulp.src('tests/*Test.php')
.pipe(plumber())
.pipe(phpunit('', options))
.on('error', notify.onError(testNotification('fail', 'phpunit')))
.pipe(notify(testNotification('pass', 'phpunit')));
});
phpunit + 通知付き

33. ytake
ブラウザシンク
gulp.task('browserSync', function () {
browserSync({
open: true,
port: 3001,
proxy: "127.0.0.1:" + configure.php_server.port,
notify: false
});
});
gulp.task('browserReload', function (){
browserSync.reload();
});

34. ytake
あとはよろしく！
gulp.task('default', ['browserSync', 'publish'], function () {
gulp.watch(['src/**/*.php'], ['phpunit']);
gulp.watch(['src/**/*.php'], ['browserReload']);
});
パターンにマッチした
ファイルが変更されたら
勝手に実行してくれます

35. 実際に動かしてみよう
ytake
https://github.com/ytake/gulp-tutorial

36. まとめ
ytake
こんなのできるかな？と思ったら大体ある
タスクランナーってすごい
楽になったのでjsフレームワークの勉強 る
開発効率が上がりました
早く帰れる様になりました

37. おわり
ytake