フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013

PHPカンファレンス2013 発表資料
#phpcon2013

php, grunt, phpcon, phpcon2013, nodejs, node, composer

Transcript

1. フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利利⽤用する @M_̲Ishikawa 2013/9/24 (Ր)
2. 本⽇日の⽬目標 •Gruntがなにかを知る •PHP開発でGruntの使い道を知る •Gruntプラグインを⾃自分で開発できる ようにする ⼊入⾨門者向けの内容です 2013/9/24 (Ր)
3. • ⾃自⼰己紹介 • Gruntとは • Grunt概要 • Gruntプラグイン • 活⽤用事例例 • バックエンド開発での利利⽤用 • 事例例 • PHP関連プラグイン 本⽇日のメニュー 2013/9/24 (Ր)
4. ⾃自⼰己紹介 2013/9/24 (Ր)
5. •Masayuki  Ishikawa •@M_̲Ishikawa •id:ishikawam •ブラウザソーシャルゲームの開発エンジニア 2013/9/24 (Ր)
6. Gruntとは 2013/9/24 (Ր)
7. http://gruntjs.com/ 2013/9/24 (Ր)
8. •最近のHTMLとかCSSのイベント・カンファレンスで 使っているのをよく⾒見見かける •講演内容がGruntではなくても、講演者はGrunt使⽤用 が前提でセッションを進めてたり •フロントエンド開発では結構当たり前に使っている •デザイナーが「⿊黒い画⾯面」といいだしたのはGruntを 触るのがきっかけ？(実際はcompassとかsassとか gitとかだけど) でも我々PHPerにはほとんど縁がない！ 2013/9/24 (Ր)
9. • node.js製のフロントエンド開発⽀支援ツール • フロントエンド関連ファイルのビルドを⾏行行う • 開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧 縮したりJSを難読化したりCSSプリプロセッサ変換（Sass等） をしたりテストしたり  etc... • プラグインによりツールを拡張できる • プラグインの開発が簡単（node=JS） • Gruntプラグイン＝nodeモジュールなのでnpmで管理理されてます Gruntとは 2013/9/24 (Ր)
10. •依存管理理といったら例例えばこんなの •PEARとかGemは？＞パッケージ管理理。 •※npmはパッケージ管理理、依存管理理の両⽅方できる •git  submoduleではなく機能として利利⽤用できる npm  のおさらい ライブラリの依存管理理 2013/9/24 (Ր)
11. Gruntの動作環境 •開発環境で使う •nodeが動けば動く。Macでも、 Windowsでも、Linuxでも •今回はクライアントMacでデモ •サーバ上での開発で使⽤用しても まったく問題なし 2013/9/24 (Ր)
12. •デザイナーがMacで制作、Sublime  Text を使⽤用して⿊黒い画⾯面でGruntを利利⽤用 •エンジニアがターミナルから接続した開発 ⽤用サーバ上でプログラミング、そこで Gruntを利利⽤用 例例えばこんなシチュエーション 2013/9/24 (Ր)
13. •Gruntは枠組みだけ、実態はプラグイ ンで、これをどう使うか。 •http://gruntjs.com/plugins •公式 25 •全体 1390 ※npm  search  gruntplugin  |  wc  -‐‑‒l  調べ  2013/9/12現在 Gruntプラグイン 2013/9/24 (Ր)
14. • grunt-‐‑‒contrib（公式プラグイン:25個）でどんなことができるか https://github.com/gruntjs/grunt-‐‑‒contrib • grunt-‐‑‒contrib-‐‑‒clean Clean  files  and  folders. • grunt-‐‑‒contrib-‐‑‒coffee Compile  CoffeeScript  files  to  JavaScript. • grunt-‐‑‒contrib-‐‑‒compass Compile  Compass  to  CSS • grunt-‐‑‒contrib-‐‑‒compress Compress  files  and  folders. • grunt-‐‑‒contrib-‐‑‒concat Concatenate  files. • grunt-‐‑‒contrib-‐‑‒connect Start  a  connect  web  server. • grunt-‐‑‒contrib-‐‑‒copy Copy  files  and  folders. • grunt-‐‑‒contrib-‐‑‒cssmin Compress  CSS  files. • grunt-‐‑‒contrib-‐‑‒csslint Lint  CSS  files. • grunt-‐‑‒contrib-‐‑‒handlebars Precompile  Handlebars  templates  to  JST  file. • grunt-‐‑‒contrib-‐‑‒htmlmin Minify  HTML • grunt-‐‑‒contrib-‐‑‒imagemin Minify  PNG  and  JPEG  images • grunt-‐‑‒contrib-‐‑‒jade Compile  Jade  files  to  HTML. • grunt-‐‑‒contrib-‐‑‒jasmine Run  jasmine  specs  headlessly  through  PhantomJS. • grunt-‐‑‒contrib-‐‑‒jshint Validate  files  with  JSHint. • grunt-‐‑‒contrib-‐‑‒jst Precompile  Underscore  templates  to  JST  file. • grunt-‐‑‒contrib-‐‑‒less Compile  LESS  files  to  CSS. • grunt-‐‑‒contrib-‐‑‒nodeunit Run  Nodeunit  unit  tests. • grunt-‐‑‒contrib-‐‑‒qunit Run  QUnit  unit  tests  in  a  headless  PhantomJS  instance. • grunt-‐‑‒contrib-‐‑‒requirejs Optimize  RequireJS  projects  using  r.js. • grunt-‐‑‒contrib-‐‑‒sass Compile  Sass  to  CSS • grunt-‐‑‒contrib-‐‑‒stylus Compile  Stylus  files  to  CSS. • grunt-‐‑‒contrib-‐‑‒uglify Minify  files  with  UglifyJS. • grunt-‐‑‒contrib-‐‑‒watch Run  predefined  tasks  whenever  watched  file  patterns  are  added,  changed  or  deleted. • grunt-‐‑‒contrib-‐‑‒yuidoc Compile  YUIDoc  Documentation. 2013/9/24 (Ր)
15. 様々なコンバート処理理 nodeunit uglifyjs 2013/9/24 (Ր)
16. • 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま せんか？ • コンパイル、ビルドのコマンド実⾏行行 • Sass(SCSS,less)を変換、CoffeeScriptを変換 • 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ • 規則正しく予想できるファイル名（card1.png,card2.png,...） へ直接アクセスされないように隠蔽するのにハッシュのリネーム • CDNのキャッシュをクリアするために⾛走らせているコマンド • srcにパラメータ付与、ファイル名変更更、等 • テストの実⾏行行 • Lint,  シンタックスチェック,  UNITテスト,等 • その他、無限の可能性が...!!! Gruntの使いどころ 2013/9/24 (Ր)
17. •1.開発環境へnode、Gruntを導⼊入 •ちなみに本番運⽤用サーバへnodeを⼊入れる必要は ありません！あくまで開発⽀支援で使うのみです。 •2.プロジェクトリポジトリへGruntfile.jsと package.jsonを⼊入れて、node_̲modules を.gitignoreに⼊入れる •3.各開発環境では  npm  install  を実⾏行行して node_̲modules以下にGruntプラグインを構築 Grunt導⼊入までの流流れ 2013/9/24 (Ր)
18. # node͕ೖ͍ͬͯΔલఏ % npm -g install grunt-cli % mkdir ~/hoge % cd ~/hoge % npm install grunt --save 1.開発環境へGruntを導⼊入 npmのお作法により、プロジェクトごとにインストールする 2013/9/24 (Ր)
19. •Gruntfile.js •Gruntの設定ファイル •package.json •Gruntで使⽤用するプラグインのパッ ケージ管理理＆依存管理理 2.プロジェクトへ  Gruntfile.js   と  package.json  を設置 2013/9/24 (Ր)
20. % npm install 3.node_̲modules以下に Gruntプラグインを構築 package.json  正しく書かれていれば  node_̲modules  ディレクトリ 以下にプラグインがインストールされます。 2013/9/24 (Ր)
21. Gruntデモ ソース公開してます https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒php 2013/9/24 (Ր)
22. Gruntのデモ • Wordpressで試します • 今回使⽤用するプラグイン • gruntでミニファイ • grunt-‐‑‒contrib-‐‑‒cssmin • grunt-‐‑‒contrib-‐‑‒uglify • gruntで構⽂文チェック • grunt-‐‑‒contrib-‐‑‒csslint • grunt-‐‑‒contrib-‐‑‒jshint • gruntでPHP！ • grunt-‐‑‒phpunit • grunt-‐‑‒phplint • grunt-‐‑‒phpcs 2013/9/24 (Ր)
23. Gruntでミニファイ • プラグイン例例 • grunt-‐‑‒contrib-‐‑‒cssmin cssのミニファイ • grunt-‐‑‒contrib-‐‑‒uglify JSのミニファイ • grunt-‐‑‒contrib-‐‑‒imagemin png,jpgのミニファイ • ファイル構成例例 • htdocs/{css,js,img}/ DocmentRoot • assets/{css,js,img}/ オリジナルファイル ※開発⽤用としてはメディアファイルをhtdocsではなく assetsを参照するようにすれと捗ります。 2013/9/24 (Ր)
24. Gruntで構⽂文チェック •本⽇日の例例 •grunt-‐‑‒contrib-‐‑‒csslint •cssの構⽂文チェック •grunt-‐‑‒contrib-‐‑‒jshint •JSの構⽂文チェック ※チェッカの設定はGruntfile.js内 Optionsで細かく指定できます。 2013/9/24 (Ր)
25. GruntでPHP！ •本⽇日の例例 •grunt-‐‑‒phpunit •PHPのユニットテスト •grunt-‐‑‒phplint •PHPの構⽂文チェック •grunt-‐‑‒phpcs •PHPのコーディング規約チェック ※他にもPHP関連Gruntプラグインはあります 2013/9/24 (Ր)
26. 例例：PHPのソースを監視して ユニットテストを⾛走らせる 2013/9/24 (Ր)
27. 例例：PHPのソースを監視して ユニットテストを⾛走らせる grunt-‐‑‒watchでソースの変更更を監視して phpunitをgrunt-‐‑‒phpunitを介して実⾏行行する ＝ 2013/9/24 (Ր)
28. Gruntプラグインを 作ってみよう 2013/9/24 (Ր)
29. •やりたいこと：grunt-‐‑‒watchでソースの変 更更を監視してphpunitをgrunt-‐‑‒phpunitを 介して実⾏行行する •「こんなのあるかな？」と思ったプラグイ ンはだいたい存在する (なければ作れば いいよ) Gruntプラグインを 作ってみよう 2013/9/24 (Ր)
30. Gruntプラグインのファイル構成例例 • Gruntfile.js • package.json • README.* • LICENSE-‐‑‒* • tasks/ • node_̲modules/ • .git • .gitignore • .npmignore • .travis.yml • test/ • tmp/ 2013/9/24 (Ր)
31. Gruntプラグインの開発にも Gruntを使います 2013/9/24 (Ր)
32. % npm init #package.jsonΛੜ੒ % npm publish #ެ։ʂ % npm info hoge #npmʹొ࿥͞ΕͨͷΛ֬ೝ 1.開発環境へGruntを導⼊入 たったこれだけ！ 2013/9/24 (Ր)
33. Gruntで楽しい コーディングライフを!! 2013/9/24 (Ր)
34. 本⽇日のサンプルはGithubで 資料料はslideshareで 公開してます。 http://www.slideshare.net/mishikawa55/2013-‐‑‒phpcon https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒php 2013/9/24 (Ր)
35. 以上、ご清聴 ありがとうございました！ @M_̲Ishikawa 2013/9/24 (Ր)
36. 以上、ご清聴 ありがとうございました！ @M_̲Ishikawa 2013/9/24 (Ր)