Submit Search
Upload
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
•
12 likes
•
5,070 views
Masayuki Ishikawa
Follow
PHPカンファレンス2013 発表資料 #phpcon2013 php, grunt, phpcon, phpcon2013, nodejs, node, composer
Read less
Read more
Technology
Report
Share
Report
Share
1 of 36
Download now
Download to read offline
Recommended
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
Masayuki Ishikawa
Type scriptmemo
Type scriptmemo
ytanno
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
お気に入り拡張機能
お気に入り拡張機能
SatsukiYabu
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
Cargo makeを使ってみた話
Cargo makeを使ってみた話
emakryo
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
Recommended
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
Masayuki Ishikawa
Type scriptmemo
Type scriptmemo
ytanno
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
お気に入り拡張機能
お気に入り拡張機能
SatsukiYabu
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
Cargo makeを使ってみた話
Cargo makeを使ってみた話
emakryo
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Erina Takei
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Kazuhiro Hara
VS Code新機能紹介2020-2021
VS Code新機能紹介2020-2021
Yuki Ueda
f3js - JS Board Shibuya #6 LT
f3js - JS Board Shibuya #6 LT
Jun Kato
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
Feature Store in DRIVE CHART
Feature Store in DRIVE CHART
emakryo
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
KiyotomoHiroyasu
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Issei Hiraoka
JavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamurai
Go Sueyoshi (a.k.a sue445)
Yapf2013
Yapf2013
l_b__
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
Customizing cargo for cross compiling
Customizing cargo for cross compiling
emakryo
PyconJP2017 Kivyによるアプリケーション開発のすすめ
PyconJP2017 Kivyによるアプリケーション開発のすすめ
Jun Okazaki
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
Kivyでゲーム
Kivyでゲーム
Jun Okazaki
200208 osh-nishimoto-v2
200208 osh-nishimoto-v2
Takuya Nishimoto
「Kivyによるアプリケーション開発のすすめ」の勧め
「Kivyによるアプリケーション開発のすすめ」の勧め
Jun Okazaki
Hello, Node.js
Hello, Node.js
Shin Sekaryo
VSCode Conference Japan 2021 kyusque
VSCode Conference Japan 2021 kyusque
kyusque
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
Developers Summit
More Related Content
What's hot
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Erina Takei
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Kazuhiro Hara
VS Code新機能紹介2020-2021
VS Code新機能紹介2020-2021
Yuki Ueda
f3js - JS Board Shibuya #6 LT
f3js - JS Board Shibuya #6 LT
Jun Kato
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
Feature Store in DRIVE CHART
Feature Store in DRIVE CHART
emakryo
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
KiyotomoHiroyasu
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Issei Hiraoka
JavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamurai
Go Sueyoshi (a.k.a sue445)
Yapf2013
Yapf2013
l_b__
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
Customizing cargo for cross compiling
Customizing cargo for cross compiling
emakryo
PyconJP2017 Kivyによるアプリケーション開発のすすめ
PyconJP2017 Kivyによるアプリケーション開発のすすめ
Jun Okazaki
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
Kivyでゲーム
Kivyでゲーム
Jun Okazaki
200208 osh-nishimoto-v2
200208 osh-nishimoto-v2
Takuya Nishimoto
「Kivyによるアプリケーション開発のすすめ」の勧め
「Kivyによるアプリケーション開発のすすめ」の勧め
Jun Okazaki
Hello, Node.js
Hello, Node.js
Shin Sekaryo
VSCode Conference Japan 2021 kyusque
VSCode Conference Japan 2021 kyusque
kyusque
What's hot
(20)
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
VS Code新機能紹介2020-2021
VS Code新機能紹介2020-2021
f3js - JS Board Shibuya #6 LT
f3js - JS Board Shibuya #6 LT
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Feature Store in DRIVE CHART
Feature Store in DRIVE CHART
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
JavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamurai
Yapf2013
Yapf2013
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Customizing cargo for cross compiling
Customizing cargo for cross compiling
PyconJP2017 Kivyによるアプリケーション開発のすすめ
PyconJP2017 Kivyによるアプリケーション開発のすすめ
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Kivyでゲーム
Kivyでゲーム
200208 osh-nishimoto-v2
200208 osh-nishimoto-v2
「Kivyによるアプリケーション開発のすすめ」の勧め
「Kivyによるアプリケーション開発のすすめ」の勧め
Hello, Node.js
Hello, Node.js
VSCode Conference Japan 2021 kyusque
VSCode Conference Japan 2021 kyusque
Similar to フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
Developers Summit
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Tsubasa Yumura
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
Aiming における scrum 20130118
Aiming における scrum 20130118
俊仁 小林
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
僕の Serverless web application
僕の Serverless web application
祐樹 夏目
マジカルsvnとキュアgit
マジカルsvnとキュアgit
Takafumi ONAKA
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
Container deployment on Azure
Container deployment on Azure
Tsukasa Kato
Devsumi2013 Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
Devsumi2013 Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
Takashi Sogabe
Micronaut on Azure 試してみた
Micronaut on Azure 試してみた
拓将 平林
20121017_アプリ制作勉強会@GMO Yours
20121017_アプリ制作勉強会@GMO Yours
Yozo SATO
Hyper → Highspeed → Development
Hyper → Highspeed → Development
aktsk
今から始めるFiddler script
今から始めるFiddler script
彰 村地
知っておきたいWordPress開発環境 2016年10月編
知っておきたいWordPress開発環境 2016年10月編
株式会社ガリレオ(開発グループ)
自己紹介とC# Devkitについて.pptx
自己紹介とC# Devkitについて.pptx
hkharu0803
デブサミ2013【15-E-2】Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
デブサミ2013【15-E-2】Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
Developers Summit
20140930 anything as_code
20140930 anything as_code
Sugawara Genki
Grailsのススメ(仮)
Grailsのススメ(仮)
Tsuyoshi Yamamoto
Similar to フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
(20)
大規模なJavaScript開発の話
大規模なJavaScript開発の話
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Capistrano紹介 at kawasaki.rb #002 #kwskrb
jsCafe v13 Grunt
jsCafe v13 Grunt
Aiming における scrum 20130118
Aiming における scrum 20130118
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
僕の Serverless web application
僕の Serverless web application
マジカルsvnとキュアgit
マジカルsvnとキュアgit
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
Container deployment on Azure
Container deployment on Azure
Devsumi2013 Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
Devsumi2013 Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
Micronaut on Azure 試してみた
Micronaut on Azure 試してみた
20121017_アプリ制作勉強会@GMO Yours
20121017_アプリ制作勉強会@GMO Yours
Hyper → Highspeed → Development
Hyper → Highspeed → Development
今から始めるFiddler script
今から始めるFiddler script
知っておきたいWordPress開発環境 2016年10月編
知っておきたいWordPress開発環境 2016年10月編
自己紹介とC# Devkitについて.pptx
自己紹介とC# Devkitについて.pptx
デブサミ2013【15-E-2】Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
デブサミ2013【15-E-2】Ruby開発者のみなさん、mrubyで楽しく快適な組み込みアプリ開発を始めませんか?
20140930 anything as_code
20140930 anything as_code
Grailsのススメ(仮)
Grailsのススメ(仮)
Recently uploaded
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Recently uploaded
(8)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
1.
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利利⽤用する @M_̲Ishikawa 2013/9/24 (火)
2.
本⽇日の⽬目標 •Gruntがなにかを知る •PHP開発でGruntの使い道を知る •Gruntプラグインを⾃自分で開発できる ようにする ⼊入⾨門者向けの内容です 2013/9/24 (火)
3.
• ⾃自⼰己紹介 • Gruntとは •
Grunt概要 • Gruntプラグイン • 活⽤用事例例 • バックエンド開発での利利⽤用 • 事例例 • PHP関連プラグイン 本⽇日のメニュー 2013/9/24 (火)
4.
⾃自⼰己紹介 2013/9/24 (火)
5.
•Masayuki Ishikawa •@M_̲Ishikawa •id:ishikawam •ブラウザソーシャルゲームの開発エンジニア 2013/9/24 (火)
6.
Gruntとは 2013/9/24 (火)
7.
http://gruntjs.com/ 2013/9/24 (火)
8.
•最近のHTMLとかCSSのイベント・カンファレンスで 使っているのをよく⾒見見かける •講演内容がGruntではなくても、講演者はGrunt使⽤用 が前提でセッションを進めてたり •フロントエンド開発では結構当たり前に使っている •デザイナーが「⿊黒い画⾯面」といいだしたのはGruntを 触るのがきっかけ?(実際はcompassとかsassとか gitとかだけど) でも我々PHPerにはほとんど縁がない! 2013/9/24 (火)
9.
• node.js製のフロントエンド開発⽀支援ツール • フロントエンド関連ファイルのビルドを⾏行行う •
開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧 縮したりJSを難読化したりCSSプリプロセッサ変換(Sass等) をしたりテストしたり etc... • プラグインによりツールを拡張できる • プラグインの開発が簡単(node=JS) • Gruntプラグイン=nodeモジュールなのでnpmで管理理されてます Gruntとは 2013/9/24 (火)
10.
•依存管理理といったら例例えばこんなの •PEARとかGemは?>パッケージ管理理。 •※npmはパッケージ管理理、依存管理理の両⽅方できる •git submoduleではなく機能として利利⽤用できる npm のおさらい ライブラリの依存管理理 2013/9/24
(火)
11.
Gruntの動作環境 •開発環境で使う •nodeが動けば動く。Macでも、 Windowsでも、Linuxでも •今回はクライアントMacでデモ •サーバ上での開発で使⽤用しても まったく問題なし 2013/9/24 (火)
12.
•デザイナーがMacで制作、Sublime Text を使⽤用して⿊黒い画⾯面でGruntを利利⽤用 •エンジニアがターミナルから接続した開発 ⽤用サーバ上でプログラミング、そこで Gruntを利利⽤用 例例えばこんなシチュエーション 2013/9/24 (火)
13.
•Gruntは枠組みだけ、実態はプラグイ ンで、これをどう使うか。 •http://gruntjs.com/plugins •公式 25 •全体 1390 ※npm
search gruntplugin | wc -‐‑‒l 調べ 2013/9/12現在 Gruntプラグイン 2013/9/24 (火)
14.
• grunt-‐‑‒contrib(公式プラグイン:25個)でどんなことができるか https://github.com/gruntjs/grunt-‐‑‒contrib •
grunt-‐‑‒contrib-‐‑‒clean Clean files and folders. • grunt-‐‑‒contrib-‐‑‒coffee Compile CoffeeScript files to JavaScript. • grunt-‐‑‒contrib-‐‑‒compass Compile Compass to CSS • grunt-‐‑‒contrib-‐‑‒compress Compress files and folders. • grunt-‐‑‒contrib-‐‑‒concat Concatenate files. • grunt-‐‑‒contrib-‐‑‒connect Start a connect web server. • grunt-‐‑‒contrib-‐‑‒copy Copy files and folders. • grunt-‐‑‒contrib-‐‑‒cssmin Compress CSS files. • grunt-‐‑‒contrib-‐‑‒csslint Lint CSS files. • grunt-‐‑‒contrib-‐‑‒handlebars Precompile Handlebars templates to JST file. • grunt-‐‑‒contrib-‐‑‒htmlmin Minify HTML • grunt-‐‑‒contrib-‐‑‒imagemin Minify PNG and JPEG images • grunt-‐‑‒contrib-‐‑‒jade Compile Jade files to HTML. • grunt-‐‑‒contrib-‐‑‒jasmine Run jasmine specs headlessly through PhantomJS. • grunt-‐‑‒contrib-‐‑‒jshint Validate files with JSHint. • grunt-‐‑‒contrib-‐‑‒jst Precompile Underscore templates to JST file. • grunt-‐‑‒contrib-‐‑‒less Compile LESS files to CSS. • grunt-‐‑‒contrib-‐‑‒nodeunit Run Nodeunit unit tests. • grunt-‐‑‒contrib-‐‑‒qunit Run QUnit unit tests in a headless PhantomJS instance. • grunt-‐‑‒contrib-‐‑‒requirejs Optimize RequireJS projects using r.js. • grunt-‐‑‒contrib-‐‑‒sass Compile Sass to CSS • grunt-‐‑‒contrib-‐‑‒stylus Compile Stylus files to CSS. • grunt-‐‑‒contrib-‐‑‒uglify Minify files with UglifyJS. • grunt-‐‑‒contrib-‐‑‒watch Run predefined tasks whenever watched file patterns are added, changed or deleted. • grunt-‐‑‒contrib-‐‑‒yuidoc Compile YUIDoc Documentation. 2013/9/24 (火)
15.
様々なコンバート処理理 nodeunit uglifyjs 2013/9/24 (火)
16.
• 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま せんか? • コンパイル、ビルドのコマンド実⾏行行 •
Sass(SCSS,less)を変換、CoffeeScriptを変換 • 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ • 規則正しく予想できるファイル名(card1.png,card2.png,...) へ直接アクセスされないように隠蔽するのにハッシュのリネーム • CDNのキャッシュをクリアするために⾛走らせているコマンド • srcにパラメータ付与、ファイル名変更更、等 • テストの実⾏行行 • Lint, シンタックスチェック, UNITテスト,等 • その他、無限の可能性が...!!! Gruntの使いどころ 2013/9/24 (火)
17.
•1.開発環境へnode、Gruntを導⼊入 •ちなみに本番運⽤用サーバへnodeを⼊入れる必要は ありません!あくまで開発⽀支援で使うのみです。 •2.プロジェクトリポジトリへGruntfile.jsと package.jsonを⼊入れて、node_̲modules を.gitignoreに⼊入れる •3.各開発環境では npm install
を実⾏行行して node_̲modules以下にGruntプラグインを構築 Grunt導⼊入までの流流れ 2013/9/24 (火)
18.
# nodeが入っている前提 % npm
-g install grunt-cli % mkdir ~/hoge % cd ~/hoge % npm install grunt --save 1.開発環境へGruntを導⼊入 npmのお作法により、プロジェクトごとにインストールする 2013/9/24 (火)
19.
•Gruntfile.js •Gruntの設定ファイル •package.json •Gruntで使⽤用するプラグインのパッ ケージ管理理&依存管理理 2.プロジェクトへ Gruntfile.js と
package.json を設置 2013/9/24 (火)
20.
% npm install 3.node_̲modules以下に Gruntプラグインを構築 package.json
正しく書かれていれば node_̲modules ディレクトリ 以下にプラグインがインストールされます。 2013/9/24 (火)
21.
Gruntデモ ソース公開してます https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒php 2013/9/24 (火)
22.
Gruntのデモ • Wordpressで試します • 今回使⽤用するプラグイン •
gruntでミニファイ • grunt-‐‑‒contrib-‐‑‒cssmin • grunt-‐‑‒contrib-‐‑‒uglify • gruntで構⽂文チェック • grunt-‐‑‒contrib-‐‑‒csslint • grunt-‐‑‒contrib-‐‑‒jshint • gruntでPHP! • grunt-‐‑‒phpunit • grunt-‐‑‒phplint • grunt-‐‑‒phpcs 2013/9/24 (火)
23.
Gruntでミニファイ • プラグイン例例 • grunt-‐‑‒contrib-‐‑‒cssmin
cssのミニファイ • grunt-‐‑‒contrib-‐‑‒uglify JSのミニファイ • grunt-‐‑‒contrib-‐‑‒imagemin png,jpgのミニファイ • ファイル構成例例 • htdocs/{css,js,img}/ DocmentRoot • assets/{css,js,img}/ オリジナルファイル ※開発⽤用としてはメディアファイルをhtdocsではなく assetsを参照するようにすれと捗ります。 2013/9/24 (火)
24.
Gruntで構⽂文チェック •本⽇日の例例 •grunt-‐‑‒contrib-‐‑‒csslint •cssの構⽂文チェック •grunt-‐‑‒contrib-‐‑‒jshint •JSの構⽂文チェック ※チェッカの設定はGruntfile.js内 Optionsで細かく指定できます。 2013/9/24 (火)
25.
GruntでPHP! •本⽇日の例例 •grunt-‐‑‒phpunit •PHPのユニットテスト •grunt-‐‑‒phplint •PHPの構⽂文チェック •grunt-‐‑‒phpcs •PHPのコーディング規約チェック ※他にもPHP関連Gruntプラグインはあります 2013/9/24 (火)
26.
例例:PHPのソースを監視して ユニットテストを⾛走らせる 2013/9/24 (火)
27.
例例:PHPのソースを監視して ユニットテストを⾛走らせる grunt-‐‑‒watchでソースの変更更を監視して phpunitをgrunt-‐‑‒phpunitを介して実⾏行行する = 2013/9/24 (火)
28.
Gruntプラグインを 作ってみよう 2013/9/24 (火)
29.
•やりたいこと:grunt-‐‑‒watchでソースの変 更更を監視してphpunitをgrunt-‐‑‒phpunitを 介して実⾏行行する •「こんなのあるかな?」と思ったプラグイ ンはだいたい存在する (なければ作れば いいよ) Gruntプラグインを 作ってみよう 2013/9/24 (火)
30.
Gruntプラグインのファイル構成例例 • Gruntfile.js • package.json •
README.* • LICENSE-‐‑‒* • tasks/ • node_̲modules/ • .git • .gitignore • .npmignore • .travis.yml • test/ • tmp/ 2013/9/24 (火)
31.
Gruntプラグインの開発にも Gruntを使います 2013/9/24 (火)
32.
% npm init
#package.jsonを生成 % npm publish #公開! % npm info hoge #npmに登録されたのを確認 1.開発環境へGruntを導⼊入 たったこれだけ! 2013/9/24 (火)
33.
Gruntで楽しい コーディングライフを!! 2013/9/24 (火)
34.
本⽇日のサンプルはGithubで 資料料はslideshareで 公開してます。 http://www.slideshare.net/mishikawa55/2013-‐‑‒phpcon https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒php 2013/9/24 (火)
35.
以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (火)
36.
以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (火)
Download now