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.
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,650 views

Published on

第7回関西PHP勉強会

Published in: Education, Technology
  • Dating direct: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • フォロー記事 -> http://nantokaworks.com/?p=1222
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Gruntファイル -> https://gist.github.com/kamiyam/6025872
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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日木曜日

×