php開発で使うタスクランナー gulp

PHP開発で使うタスクランナー GULP

第86回 PHP勉強会 YUUKI TAKEZAWA

ytake

自己紹介なまえ: 竹澤 有貴(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

すこしだけLaravelLaravel5でるでる詐欺

たぶんそろそろベータかすっ飛ばして突然出そう

ファサードあまり使わなくなるよ 使えなくなる訳ではない！

インターフェースを理解してる人としてない人の差がすんごい出る

Laravelレシピ日本語版 ver5 用意中

ytake

本日は PHPの話は

ほとんどしません

ytake

ytake

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

ytake

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

ytake

ytake

ytake

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

と思っていました少し覚えるだけ

node.jsはトモダチ(ありがとう phpstorm)

angular, backboneなど使う機会が多くなった

React.js便利過ぎた(ブラウザでコンパイル嫌だ

sass, lessとかなんか増えてきた

ytake

ytake

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

こんな経験ありませんか？jsライブラリ落としたら依存パッケージ足りなくて動かなかった

css, jsフレームワークのバージョンアップが ついていけない

パスがバラバラで辛い

解決しようと手動でやってたら残業してた

ytake

ytake

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

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

ytake

ytake

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

ytake

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

ytake

bowerフロントエンドパッケージ管理(twitter製)

Yeomanの普及もあり常識的なものに

足りない、動かないからの解放

node.js, bower.json

bower_componentsファイルをvendorに移動すれば綺麗(.bowerrc設置)

ytake

ytake

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

ytake

phpのあれと同じ

ytake

使うには？

ytake

node.jsインストール

npm install -g gulp

npm install -g bower

package.json

ytake

{ "devDependencies": { "bower": "1.*", "gulp": "3.*" } }

$ npm install

タスク書いてみよう

ytake

タスクの作り方

ytake

gulpfile.jsに書く

タスク名を付けてその中に書く

よくわからなければサンプル見てみよう

stream云々色々あるので気になったら 調べてみてください(今回はそこまで触れません)

以上

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

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

ytake

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')); });

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

ytake

ファイルの変更を監視

ytake

node.jsの得意分野

ytake

ファイルの変更などを監視してリアルタイムにタスク実行

shellもOK

phpunitも実行可能

ブラウザの更新も自動でやらせる

PHPビルトインサーバも必要であれば

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 + 通知付き

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(); });

ytake

あとはよろしく！

gulp.task('default', ['browserSync', 'publish'], function () { gulp.watch(['src/**/*.php'], ['phpunit']); gulp.watch(['src/**/*.php'], ['browserReload']); });

パターンにマッチした ファイルが変更されたら 勝手に実行してくれます

実際に動かしてみよう

ytake

https://github.com/ytake/gulp-tutorial

まとめ

ytake

こんなのできるかな？と思ったら大体ある

タスクランナーってすごい

楽になったのでjsフレームワークの勉強捗る

開発効率が上がりました

早く帰れる様になりました

おわり

ytake