Embed Size (px)
Citation preview
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
こんなのできるかな？と思ったら大体ある
タスクランナーってすごい
楽になったのでjsフレームワークの勉強捗る
開発効率が上がりました
早く帰れる様になりました
おわり
ytake
