php開発で使うタスクランナー gulp
-
Upload
yuuki-takezawa -
Category
Technology
-
view
2.459 -
download
0
Transcript of php開発で使うタスクランナー gulp
![Page 1: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/1.jpg)
PHP開発で使うタスクランナー GULP
第86回 PHP勉強会 YUUKI TAKEZAWA
ytake
![Page 2: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/2.jpg)
自己紹介なまえ: 竹澤 有貴(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
![Page 3: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/3.jpg)
すこしだけLaravelLaravel5でるでる詐欺
たぶんそろそろベータかすっ飛ばして突然出そう
ファサードあまり使わなくなるよ 使えなくなる訳ではない!
インターフェースを理解してる人としてない人の差がすんごい出る
Laravelレシピ日本語版 ver5 用意中
ytake
![Page 4: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/4.jpg)
本日は PHPの話は
ほとんどしません
ytake
![Page 5: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/5.jpg)
ytake
![Page 6: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/6.jpg)
フロントエンドも自動化 してますか?
ytake
![Page 7: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/7.jpg)
タスクランナー ご存知ですか?
ytake
![Page 8: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/8.jpg)
ytake
![Page 9: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/9.jpg)
ytake
覚えてもすぐ新しいものがでるじゃん!
![Page 10: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/10.jpg)
と思っていました少し覚えるだけ
node.jsはトモダチ(ありがとう phpstorm)
angular, backboneなど使う機会が多くなった
React.js便利過ぎた(ブラウザでコンパイル嫌だ
sass, lessとかなんか増えてきた
ytake
![Page 11: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/11.jpg)
ytake
どっちが良い、悪いではなくて 単純に好みの話です なので今日はgulp
![Page 12: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/12.jpg)
こんな経験ありませんか?jsライブラリ落としたら依存パッケージ足りなくて動かなかった
css, jsフレームワークのバージョンアップが ついていけない
パスがバラバラで辛い
解決しようと手動でやってたら残業してた
ytake
![Page 13: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/13.jpg)
ytake
phpに関わっている以上、 この問題は常に・・・
![Page 14: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/14.jpg)
タスクランナー 導入すべし
ytake
![Page 15: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/15.jpg)
ytake
フロントエンドはphpよりも進化が早い
![Page 16: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/16.jpg)
ytake
node.jsが普及し、 フロントエンドでも使われ始めた
![Page 17: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/17.jpg)
ytake
![Page 18: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/18.jpg)
bowerフロントエンドパッケージ管理(twitter製)
Yeomanの普及もあり常識的なものに
足りない、動かないからの解放
node.js, bower.json
bower_componentsファイルをvendorに移動すれば綺麗(.bowerrc設置)
ytake
![Page 19: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/19.jpg)
ytake
{ "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "*", "bootstrap": "*", "react": "*" } }
![Page 20: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/20.jpg)
ytake
phpのあれと同じ
![Page 21: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/21.jpg)
ytake
![Page 22: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/22.jpg)
使うには?
ytake
node.jsインストール
npm install -g gulp
npm install -g bower
package.json
![Page 23: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/23.jpg)
ytake
{ "devDependencies": { "bower": "1.*", "gulp": "3.*" } }
$ npm install
![Page 24: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/24.jpg)
タスク書いてみよう
ytake
![Page 25: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/25.jpg)
タスクの作り方
ytake
gulpfile.jsに書く
タスク名を付けてその中に書く
よくわからなければサンプル見てみよう
stream云々色々あるので気になったら 調べてみてください(今回はそこまで触れません)
以上
![Page 26: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/26.jpg)
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
![Page 27: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/27.jpg)
インストール後に 所定のディレクトリに配置して URLのパスをシステムに合わせて書き換えて 圧縮
ytake
![Page 28: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/28.jpg)
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')); });
![Page 29: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/29.jpg)
少しPHPの開発でも ありがたくなってきました
ytake
![Page 30: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/30.jpg)
ファイルの変更を監視
ytake
![Page 31: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/31.jpg)
node.jsの得意分野
ytake
ファイルの変更などを監視してリアルタイムにタスク実行
shellもOK
phpunitも実行可能
ブラウザの更新も自動でやらせる
PHPビルトインサーバも必要であれば
![Page 32: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/32.jpg)
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 + 通知付き
![Page 33: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/33.jpg)
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(); });
![Page 34: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/34.jpg)
ytake
あとはよろしく!
gulp.task('default', ['browserSync', 'publish'], function () { gulp.watch(['src/**/*.php'], ['phpunit']); gulp.watch(['src/**/*.php'], ['browserReload']); });
パターンにマッチした ファイルが変更されたら 勝手に実行してくれます
![Page 36: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/36.jpg)
まとめ
ytake
こんなのできるかな?と思ったら大体ある
タスクランナーってすごい
楽になったのでjsフレームワークの勉強捗る
開発効率が上がりました
早く帰れる様になりました
![Page 37: php開発で使うタスクランナー gulp](https://reader036.fdocuments.net/reader036/viewer/2022081721/55a9c62d1a28abfc408b4640/html5/thumbnails/37.jpg)
おわり
ytake