PhpStormとGrunt.jsで作るCakePHP快適開発環境
33
PhpStormとGrunt.jsで作る CakePHP快適開発環境 第7回関西PHP勉強会 2013.7.17 13年7月18日木曜日
description
第7回関西PHP勉強会
Transcript of 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日木曜日
