PhpStormとGrunt.jsで作る
CakePHP快適開発環境
第7回関西PHP勉強会
           2013.7.17              
13年7月18日木曜日
自己紹介
• かみやん (Twitter@kamiyam)
• エンジニア
• Webサービスつくってます
http://nantokaworks.com
13年7月18日木曜日
普段はNode.js の人です
13年7月18日木曜日
Grunt.js?
13年7月18日木曜日
Grunt.js
JavaScript(Node.js)製タスクランナー
13年7月18日木曜日
Grunt.js
JavaScript(Node.js)製タスクランナー
13年7月18日木曜日
Grunt.js
JavaScript(Node.js)製タスクランナー
え?Node???
13年7月18日木曜日
インストール
$ npm install -g grunt-cli
※ gruntコマンドが利用可能となる。
13年7月18日木曜日
環境構築
$ vim Gruntfile.js (Grunt.coffee)
13年7月18日木曜日
Gruntfile.js 設定例
module.exports = function(grunt) {
grunt.initConfig({
xxxxxx: {
	

 //.........
}
});
grunt.loadNpmTasks('g...
積み上がるタスク
• CoffeeScriptのコンパイル
• Sassのコンパイル
• CSSファイルのコードミニファイ化・結合
• 画像ファイルの圧縮
• 画面の表示確認
13年7月18日木曜日
gruntのメリット
grunt内でタスクとして
ファイルを監視してリロードかけた
り、コマンドの実行を割り当てられ
13年7月18日木曜日
gruntのメリット
grunt内でタスクとして
ファイルを監視してリロードかけた
り、コマンドの実行を割り当てられ
え?フロントエンドの話?
13年7月18日木曜日
gruntでできること(例)
• スタンドアロンでサーバ起動 (Node:V8)
• テストを実行する
• FTPでファイルアップロード
• rsync などのコマンドを実行
13年7月18日木曜日
gruntでできること(例)
• grunt server
• grunt test
• grunt ftp
• grunt rsync
• etc...
13年7月18日木曜日
gruntでできること(例)
• grunt server
• grunt test
• grunt ftp
• grunt rsync
• etc...
実行するタスクを
自由に定義出来る
13年7月18日木曜日
GruntでCakePHP
• css/js/html(ctp)/phpの監視/リロード
• php -S ... (php5.4<)
• テスト(PHPUnit)実行
13年7月18日木曜日
PHP でサーバ起動
$ php -S localhost:3000
-c /usr/local/etc/php/5.4/php.ini
-t app/webroot
13年7月18日木曜日
PHP でサーバ起動
• -S
<addr>:<port> Run with built-in web server.
• -c
<path>¦<file> Look for php.ini file in this
directory
• -t
...
Grunt 実行
$ grunt [server]
※ Gruntfile.js(Gruntfile.coffee)と
同階層ディレクトリで実行
13年7月18日木曜日
リバースプロキシ
PHPのスタンドアロンサーバだけでは
なくApache・nginxでも可能
13年7月18日木曜日
リバースプロキシ
13年7月18日木曜日
PhpStormでGrunt
• Run Command...
• grunt/node などのPATHを通す
• External Tool 設定
13年7月18日木曜日
Php Storm $PATH設定
$ vim /Applications/Phpstorm.app/
Contents/Info.plist
$ vim /Applications/Webstorm.app/
Contents/Info.pl...
Php Storm $PATH設定
<key>LSEnvironment</key>
<dict>
<key>PATH</key>
<string>[Your PathValue]</string>
</dict>
13年7月18日木曜日
Php Storm $PATH設定
$ /System/Library/Frameworks/
CoreServices.framework/Frameworks/
LaunchServices.framework/Support/
lsreg...
External Tool
13年7月18日木曜日
Alias C
13年7月18日木曜日
Arias C
• Composer
• Command Line Tool Support
13年7月18日木曜日
Arias C
PhpStorm から Composerを
実行するのに「Arias c」を使う!
13年7月18日木曜日
Command Line Tool Support
13年7月18日木曜日
まとめ
• Grunt.jsはタスクツール
• Gruntからコマンドが実行可能
• サーバ起動・テスト・デプロイを手軽に
13年7月18日木曜日
ご静聴ありがとうございました
13年7月18日木曜日
Upcoming SlideShare
Loading in …5
×

PhpStormとGrunt.jsで作るCakePHP快適開発環境

7,375 views

Published on

第7回関西PHP勉強会

Published in: Education, Technology
2 Comments
12 Likes
Statistics
Notes
No Downloads
Views
Total views
7,375
On SlideShare
0
From Embeds
0
Number of Embeds
2,525
Actions
Shares
0
Downloads
15
Comments
2
Likes
12
Embeds 0
No embeds

No notes for slide

PhpStormとGrunt.jsで作るCakePHP快適開発環境

  1. 1. PhpStormとGrunt.jsで作る CakePHP快適開発環境 第7回関西PHP勉強会            2013.7.17               13年7月18日木曜日
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam) • エンジニア • Webサービスつくってます http://nantokaworks.com 13年7月18日木曜日
  3. 3. 普段はNode.js の人です 13年7月18日木曜日
  4. 4. Grunt.js? 13年7月18日木曜日
  5. 5. Grunt.js JavaScript(Node.js)製タスクランナー 13年7月18日木曜日
  6. 6. Grunt.js JavaScript(Node.js)製タスクランナー 13年7月18日木曜日
  7. 7. Grunt.js JavaScript(Node.js)製タスクランナー え?Node??? 13年7月18日木曜日
  8. 8. インストール $ npm install -g grunt-cli ※ gruntコマンドが利用可能となる。 13年7月18日木曜日
  9. 9. 環境構築 $ vim Gruntfile.js (Grunt.coffee) 13年7月18日木曜日
  10. 10. Gruntfile.js 設定例 module.exports = function(grunt) { grunt.initConfig({ xxxxxx: { //......... } }); grunt.loadNpmTasks('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']); }; 13年7月18日木曜日
  11. 11. 積み上がるタスク • CoffeeScriptのコンパイル • Sassのコンパイル • CSSファイルのコードミニファイ化・結合 • 画像ファイルの圧縮 • 画面の表示確認 13年7月18日木曜日
  12. 12. gruntのメリット grunt内でタスクとして ファイルを監視してリロードかけた り、コマンドの実行を割り当てられ 13年7月18日木曜日
  13. 13. gruntのメリット grunt内でタスクとして ファイルを監視してリロードかけた り、コマンドの実行を割り当てられ え?フロントエンドの話? 13年7月18日木曜日
  14. 14. gruntでできること(例) • スタンドアロンでサーバ起動 (Node:V8) • テストを実行する • FTPでファイルアップロード • rsync などのコマンドを実行 13年7月18日木曜日
  15. 15. gruntでできること(例) • grunt server • grunt test • grunt ftp • grunt rsync • etc... 13年7月18日木曜日
  16. 16. gruntでできること(例) • grunt server • grunt test • grunt ftp • grunt rsync • etc... 実行するタスクを 自由に定義出来る 13年7月18日木曜日
  17. 17. GruntでCakePHP • css/js/html(ctp)/phpの監視/リロード • php -S ... (php5.4<) • テスト(PHPUnit)実行 13年7月18日木曜日
  18. 18. PHP でサーバ起動 $ php -S localhost:3000 -c /usr/local/etc/php/5.4/php.ini -t app/webroot 13年7月18日木曜日
  19. 19. PHP でサーバ起動 • -S <addr>:<port> Run with built-in web server. • -c <path>¦<file> Look for php.ini file in this directory • -t <docroot> Specify document root <docroot> for built-in web server. 13年7月18日木曜日
  20. 20. Grunt 実行 $ grunt [server] ※ Gruntfile.js(Gruntfile.coffee)と 同階層ディレクトリで実行 13年7月18日木曜日
  21. 21. リバースプロキシ PHPのスタンドアロンサーバだけでは なくApache・nginxでも可能 13年7月18日木曜日
  22. 22. リバースプロキシ 13年7月18日木曜日
  23. 23. PhpStormでGrunt • Run Command... • grunt/node などのPATHを通す • External Tool 設定 13年7月18日木曜日
  24. 24. Php Storm $PATH設定 $ vim /Applications/Phpstorm.app/ Contents/Info.plist $ vim /Applications/Webstorm.app/ Contents/Info.plist PhpStorm WebStorm 13年7月18日木曜日
  25. 25. Php Storm $PATH設定 <key>LSEnvironment</key> <dict> <key>PATH</key> <string>[Your PathValue]</string> </dict> 13年7月18日木曜日
  26. 26. Php Storm $PATH設定 $ /System/Library/Frameworks/ CoreServices.framework/Frameworks/ LaunchServices.framework/Support/ lsregister -v -f /Applications/ PhpStorm.app Via. http://ify.io/getting-webstorm-external-tools-to-work-on-webstorm-on-osx/ 13年7月18日木曜日
  27. 27. External Tool 13年7月18日木曜日
  28. 28. Alias C 13年7月18日木曜日
  29. 29. Arias C • Composer • Command Line Tool Support 13年7月18日木曜日
  30. 30. Arias C PhpStorm から Composerを 実行するのに「Arias c」を使う! 13年7月18日木曜日
  31. 31. Command Line Tool Support 13年7月18日木曜日
  32. 32. まとめ • Grunt.jsはタスクツール • Gruntからコマンドが実行可能 • サーバ起動・テスト・デプロイを手軽に 13年7月18日木曜日
  33. 33. ご静聴ありがとうございました 13年7月18日木曜日

×