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日木曜日
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
Next
Upcoming SlideShare
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

第7回関西PHP勉強会

Related Books

Free with a 30 day trial from Scribd

See all

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

    Jan. 4, 2016
  • kkkw

    Mar. 26, 2015
  • NaruhitoKubota

    Feb. 27, 2015
  • taisukeshindo9

    Feb. 26, 2014
  • TakashiMatsushita

    Oct. 13, 2013
  • yuisakamoto1

    Sep. 6, 2013
  • chariderpato

    Jul. 24, 2013
  • TakeshiWatanabe2

    Jul. 21, 2013
  • makies

    Jul. 18, 2013
  • TakeshiTajima

    Jul. 18, 2013
  • syuichitsuji

    Jul. 17, 2013
  • 448jp

    Jul. 17, 2013

第7回関西PHP勉強会

Views

Total views

7,812

On Slideshare

0

From embeds

0

Number of embeds

2,598

Actions

Downloads

15

Shares

0

Comments

0

Likes

12

×