Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PHP開発で使う

タスクランナー GULP
第86回 PHP勉強会
YUUKI TAKEZAWA
ytake
自己紹介
なまえ: 竹澤 有貴(ytake)
twitter: @ex_takezawa
blog: http://blog.comnect.jp.net
GitHub: https://github.com/ytake
php, node.j...
すこしだけLaravel
Laravel5でるでる詐欺
たぶんそろそろベータかすっ飛ばして突然出そう
ファサードあまり使わなくなるよ

使えなくなる訳ではない!
インターフェースを理解してる人としてない人の差がすん
ごい出る
Laravelレシ...
本日は
PHPの話は
ほとんどしません
ytake
ytake
フロントエンドも自動化
してますか?
ytake
タスクランナー
ご存知ですか?
ytake
ytake
ytake
覚えてもすぐ新しいものがでるじゃん!
と思っていました
少し覚えるだけ
node.jsはトモダチ(ありがとう phpstorm)
angular, backboneなど使う機会が多くなった
React.js便利過ぎた(ブラウザでコンパイル嫌だ
sass, lessとかなんか増えてき...
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に

移動すれば綺...
ytake
{

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

],

"dependencies": {

"jquery": "...
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.ins...
インストール後に
所定のディレクトリに配置して
URLのパスをシステムに合わせて書き換えて
圧縮
ytake
ytake
gulp.task('publish', ['bower'], function () {

var jsFilter = gulpFilter('**/*.js');

var cssFilter = gulpFilter('**...
少し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...
ytake
ブラウザシンク
gulp.task('browserSync', function () {

browserSync({

open: true,

port: 3001,

proxy: "127.0.0.1:" + confi...
ytake
あとはよろしく!


gulp.task('default', ['browserSync', 'publish'], function () {

gulp.watch(['src/**/*.php'], ['phpunit'])...
実際に動かしてみよう
ytake
https://github.com/ytake/gulp-tutorial
まとめ
ytake
こんなのできるかな?と思ったら大体ある
タスクランナーってすごい
楽になったのでjsフレームワークの勉強 る
開発効率が上がりました
早く帰れる様になりました
おわり
ytake
Upcoming SlideShare
Loading in …5
×

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

9,724 views

Published on

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

Published in: Technology
  • Be the first to comment

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

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

×