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

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('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']);};

13年7月18日木曜日

積み上がるタスク• 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<docroot> Specify document root <docroot> for built-in web server.

13年7月18日木曜日

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.plist

PhpStorm

WebStorm

13年7月18日木曜日

Php Storm $PATH設定

<key>LSEnvironment</key><dict> <key>PATH</key> <string>[Your Path Value]</string></dict>

13年7月18日木曜日

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

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