Enviar pesquisa
Carregar
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
•
21 gostaram
•
7,573 visualizações
Masayuki Ishikawa
Seguir
YAPC::Asia Tokyo 2013 発表資料 #yapcasia grunt, yapc, perl, yapcasia
Leia menos
Leia mais
Tecnologia
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 50
Baixar agora
Baixar para ler offline
Recomendados
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
Masayuki Ishikawa
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
Kazuhiro Hara
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
Hiroh Satoh
141115 making web site
141115 making web site
Himi Sato
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
msgraph: Terraform provider for Microsoft Graph
msgraph: Terraform provider for Microsoft Graph
yaegashi
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
Recomendados
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
Masayuki Ishikawa
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
Kazuhiro Hara
映画にでてくるハッカーになりたい - YAPC Asia 2010
映画にでてくるハッカーになりたい - YAPC Asia 2010
Hiroh Satoh
141115 making web site
141115 making web site
Himi Sato
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
msgraph: Terraform provider for Microsoft Graph
msgraph: Terraform provider for Microsoft Graph
yaegashi
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
サーバサイドNodeの使い道
サーバサイドNodeの使い道
pospome
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
Hello, Node.js
Hello, Node.js
Shin Sekaryo
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
Node js 入門
Node js 入門
Satoshi Takami
マジカルsvnとキュアgit
マジカルsvnとキュアgit
Takafumi ONAKA
レガシー環境で個人ベースでなんとか頑張るDVCS(Git)運用
レガシー環境で個人ベースでなんとか頑張るDVCS(Git)運用
kimukou_26 Kimukou
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
Source treeの紹介
Source treeの紹介
ko ty
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013
DQNEO
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Android,Brillo,ChromeOS
Android,Brillo,ChromeOS
l_b__
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
dm-writeboost-kernelvm
dm-writeboost-kernelvm
Akira Hayakawa
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
Toru Takahashi
Mais conteúdo relacionado
Mais procurados
サーバサイドNodeの使い道
サーバサイドNodeの使い道
pospome
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
Hello, Node.js
Hello, Node.js
Shin Sekaryo
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
Node js 入門
Node js 入門
Satoshi Takami
マジカルsvnとキュアgit
マジカルsvnとキュアgit
Takafumi ONAKA
レガシー環境で個人ベースでなんとか頑張るDVCS(Git)運用
レガシー環境で個人ベースでなんとか頑張るDVCS(Git)運用
kimukou_26 Kimukou
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
Source treeの紹介
Source treeの紹介
ko ty
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013
DQNEO
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Android,Brillo,ChromeOS
Android,Brillo,ChromeOS
l_b__
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
Mais procurados
(20)
サーバサイドNodeの使い道
サーバサイドNodeの使い道
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
React VR ことはじめ
React VR ことはじめ
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
Hello, Node.js
Hello, Node.js
Node.js Hands-On
Node.js Hands-On
Node js 入門
Node js 入門
マジカルsvnとキュアgit
マジカルsvnとキュアgit
レガシー環境で個人ベースでなんとか頑張るDVCS(Git)運用
レガシー環境で個人ベースでなんとか頑張るDVCS(Git)運用
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
Source treeの紹介
Source treeの紹介
TypeScriptへの入口
TypeScriptへの入口
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Android,Brillo,ChromeOS
Android,Brillo,ChromeOS
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Semelhante a フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
dm-writeboost-kernelvm
dm-writeboost-kernelvm
Akira Hayakawa
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
Toru Takahashi
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
Toru Takahashi
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
OSC2013 HIROSHIMA ライトニングトーク すごい広島
OSC2013 HIROSHIMA ライトニングトーク すごい広島
Tomohiko Himura
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
社内の遊休PCをAzurePipelinesでCICDに活用しよう
社内の遊休PCをAzurePipelinesでCICDに活用しよう
Shinya Nakajima
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
Developers Summit
GoでMinecraftっぽいの作る
GoでMinecraftっぽいの作る
京大 マイコンクラブ
プロ用CMSフレームワークテーマ「echo」のご紹介
プロ用CMSフレームワークテーマ「echo」のご紹介
Seiko Kuchida
明日から使えるgradle
明日から使えるgradle
kimukou_26 Kimukou
Hyper → Highspeed → Development
Hyper → Highspeed → Development
aktsk
Aiming における scrum 20130118
Aiming における scrum 20130118
俊仁 小林
自己紹介とC# Devkitについて.pptx
自己紹介とC# Devkitについて.pptx
hkharu0803
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Tsubasa Yumura
Git
Git
Shuhei Iitsuka
アカツキはどのようにAWSを活用しているか #jawsug
アカツキはどのようにAWSを活用しているか #jawsug
aktsk
[141004] cedec 2014 참관기 & 강연 리뷰 #1
[141004] cedec 2014 참관기 & 강연 리뷰 #1
MinGeun Park
孤独なGit
孤独なGit
Yu Matsushita
Semelhante a フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
(20)
dm-writeboost-kernelvm
dm-writeboost-kernelvm
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
EmbulkとDigdagとデータ分析基盤と
大規模なJavaScript開発の話
大規模なJavaScript開発の話
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
OSC2013 HIROSHIMA ライトニングトーク すごい広島
OSC2013 HIROSHIMA ライトニングトーク すごい広島
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
社内の遊休PCをAzurePipelinesでCICDに活用しよう
社内の遊休PCをAzurePipelinesでCICDに活用しよう
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
夏サミ2013 Hadoopを使わない独自の分散処理環境の構築とその運用
GoでMinecraftっぽいの作る
GoでMinecraftっぽいの作る
プロ用CMSフレームワークテーマ「echo」のご紹介
プロ用CMSフレームワークテーマ「echo」のご紹介
明日から使えるgradle
明日から使えるgradle
Hyper → Highspeed → Development
Hyper → Highspeed → Development
Aiming における scrum 20130118
Aiming における scrum 20130118
自己紹介とC# Devkitについて.pptx
自己紹介とC# Devkitについて.pptx
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Capistrano紹介 at kawasaki.rb #002 #kwskrb
Git
Git
アカツキはどのようにAWSを活用しているか #jawsug
アカツキはどのようにAWSを活用しているか #jawsug
[141004] cedec 2014 참관기 & 강연 리뷰 #1
[141004] cedec 2014 참관기 & 강연 리뷰 #1
孤独なGit
孤独なGit
Último
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Último
(12)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
1.
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_̲Ishikawa 〜~PerlとGruntが恋をした〜~ 2013/9/24 (火)
2.
本⽇日の⽬目標 •Gruntがなにかを知る •Perl開発でGruntの使い道を知る •Gruntプラグインを⾃自分で開発できる ようにする ⼊入⾨門者向けの内容です 2013/9/24 (火)
3.
Perlの話は… ほんの少し… だけど 2013/9/24 (火)
4.
•⾃自⼰己紹介 •Gruntとは •Gruntの動作環境 •Gruntプラグイン •Gruntの使い所 •導⼊入までの流流れ •デモ •プラグインを作ってみよう •Grunt利利⽤用のコツ 本⽇日のメニュー 2013/9/24 (火)
5.
⾃自⼰己紹介 2013/9/24 (火)
6.
•Masayuki Ishikawa •@M_̲Ishikawa •id:ishikawam •GREEでブラウザソーシャルゲームの開発エンジニア •去年年のYAPCでLTデビュー •「おせっかい駆動開発のススメ」 •「ドヤリング型開発」を提唱 2013/9/24 (火)
7.
•スタバなどのカフェでMacbook開いて ドヤ顔でコーディングする近代の開発 ⼿手法 •検索索ワード:ドヤラー、ドヤリング ドヤリング型開発とは https://www.google.co.jp/search?q=ドヤリング&tbm=isch おさらい 2013/9/24 (火)
8.
Gruntとは 2013/9/24 (火)
9.
http://gruntjs.com/ 2013/9/24 (火)
10.
2013/9/24 (火)
11.
id:naoya 公認 2013/9/24 (火)
12.
•最近のHTMLとかCSSのイベント・カンファレンスで 使っているのをよく⾒見見かける •講演内容がGruntではなくても、講演者はGrunt使⽤用 が前提でセッションを進めてたり •フロントエンド開発では結構当たり前に使っている •デザイナーが「⿊黒い画⾯面」といいだしたのはGruntを 触るのがきっかけ?(実際はcompassとかsassとか gitとかだけど) でも我々Perlerにはほとんど縁がない! 2013/9/24 (火)
13.
この機会に名前だけでも 覚えていって下さい 2013/9/24 (火)
14.
• node.js製のフロントエンド開発⽀支援ツール • フロントエンド関連ファイルのビルドを⾏行行う •
開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧 縮したりJSを難読化したりCSSプリプロセッサ変換(Sass等) をしたりテストしたり etc... • プラグインによりツールを拡張できる • プラグインの開発が簡単(node=JS) • Gruntプラグイン=nodeモジュールなのでnpmで管理理されてます Gruntとは 2013/9/24 (火)
15.
•依存管理理といったら例例えばこんなの •CPANとかPEARとかGemは?>パッケージ管理理。 •※npmはパッケージ管理理、依存管理理の両⽅方できる •git submoduleではなく機能として利利⽤用できる npm のおさらい ライブラリの依存管理理 2013/9/24
(火)
16.
Gruntの動作環境 •開発環境で使う •nodeが動けば動く。Macでも、 Windowsでも、Linuxでも •今回はクライアントMacでデモ •サーバ上での開発で使⽤用しても まったく問題なし 2013/9/24 (火)
17.
•デザイナーがMacで制作、Sublime Text を使⽤用して⿊黒い画⾯面でGruntを利利⽤用 •エンジニアがターミナルから接続した開発 ⽤用サーバ上でプログラミング、そこで Gruntを利利⽤用 例例えばこんなシチュエーション 2013/9/24 (火)
18.
•Gruntは枠組みだけ、実態はプラグイ ンで、これをどう使うか。 •http://gruntjs.com/plugins •公式 25 •全体 1390 ※npm
search gruntplugin | wc -‐‑‒l 調べ 2013/9/12現在 Gruntプラグイン 2013/9/24 (火)
19.
• 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 (火)
20.
様々なコンバート処理理 nodeunit uglifyjs 2013/9/24 (火)
21.
• 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま せんか? • コンパイル、ビルドのコマンド実⾏行行 •
Sass(SCSS,less)を変換、CoffeeScriptを変換 • 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ • 規則正しく予想できるファイル名(card1.png,card2.png,...) へ直接アクセスされないように隠蔽するのにハッシュのリネーム • CDNのキャッシュをクリアするために⾛走らせているコマンド • srcにパラメータ付与、ファイル名変更更、等 • テストの実⾏行行 • Lint, シンタックスチェック, UNITテスト,等 • その他、無限の可能性が...!!! Gruntの使いどころ 2013/9/24 (火)
22.
•1.開発環境へnode、Gruntを導⼊入 •ちなみに本番運⽤用サーバへnodeを⼊入れる必要は ありません!あくまで開発⽀支援で使うのみです。 •2.プロジェクトリポジトリへGruntfile.jsと package.jsonを⼊入れて、node_̲modules を.gitignoreに⼊入れる •3.各開発環境では npm install
を実⾏行行して node_̲modules以下にGruntプラグインを構築 Grunt導⼊入までの流流れ 2013/9/24 (火)
23.
# nodeが入っている前提 % npm
-g install grunt-cli % mkdir ~/hoge % cd ~/hoge % npm install grunt --save 1.開発環境へGruntを導⼊入 npmのお作法により、プロジェクトごとにインストールする 2013/9/24 (火)
24.
•Gruntfile.js •Gruntの設定ファイル •package.json •Gruntで使⽤用するプラグインのパッ ケージ管理理&依存管理理 2.プロジェクトへ Gruntfile.js と
package.json を設置 2013/9/24 (火)
25.
% npm install 3.node_̲modules以下に Gruntプラグインを構築 package.json
正しく書かれていれば node_̲modules ディレクトリ 以下にプラグインがインストールされます。 2013/9/24 (火)
26.
Gruntデモ ソース公開してます https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc 2013/9/24 (火)
27.
Gruntのデモ • Catalistに載せたBootswatch(Bootstrap)で作ったサンプル試 します • 今回使⽤用するプラグイン •
Gruntで構⽂文チェック • grunt-‐‑‒contrib-‐‑‒csslint • grunt-‐‑‒contrib-‐‑‒jshint • Gruntでミニファイ • grunt-‐‑‒contrib-‐‑‒cssmin • grunt-‐‑‒contrib-‐‑‒uglify • grunt-‐‑‒contrib-‐‑‒imagemin • GruntでPerl! • grunt-‐‑‒perllint 2013/9/24 (火)
28.
Gruntで構⽂文チェック •本⽇日の例例 •grunt-‐‑‒contrib-‐‑‒csslint •cssの構⽂文チェック •grunt-‐‑‒contrib-‐‑‒jshint •JSの構⽂文チェック ※チェッカの設定はGruntfile.js内 Optionsで細かく指定できます。 2013/9/24 (火)
29.
Gruntでミニファイ • プラグイン例例 • grunt-‐‑‒contrib-‐‑‒cssmin
cssのミニファイ • grunt-‐‑‒contrib-‐‑‒uglify JSのミニファイ • grunt-‐‑‒contrib-‐‑‒imagemin png,jpgのミニファイ • ファイル構成例例 • htdocs/{css,js,img}/ DocmentRoot • assets/{css,js,img}/ オリジナルファイル ※開発⽤用と本番⽤用でDocumentRootまたは staticディレクトリを切切り替えるようにすると捗ります。 2013/9/24 (火)
30.
※開発⽤用と本番⽤用でDocumentRoot またはstaticディレクトリを 切切り替えるようにすると捗ります。 2013/9/24 (火)
31.
開発確認⽤用 ・読みやすいJS ・読みやすいCSS デプロイ⽤用 ・難読化したJS ・圧縮化したCSS Write Code ・CoffeeScript ・Sass(SCSS) 参照先とかDocumentRootを切り替え /** * Grunt
Sample SCSS */ $text_color: #121c00; #sample { h1 { margin: 10px; } p { color: $text_color; } } /** * Grunt Sample SCSS */ #sample h1 { margin: 10px; } #sample p { color: h1 {#121c00; } #sample h1{margin:10px}#sample p{color:#121c00} 2013/9/24 (火)
32.
GruntでPerl! •本⽇日の例例 •grunt-‐‑‒perllint YAPCのために作ってみた •Perlの構⽂文チェック 2013/9/24 (火)
33.
例例:Perlのソースを監視して 構⽂文チェックを⾛走らせる 2013/9/24 (火)
34.
例例:Perlのソースを監視して 構⽂文チェックを⾛走らせる grunt-‐‑‒watch でソースの変更更を監視して perl -‐‑‒wc
を grunt-‐‑‒perllint を介して実⾏行行する = 2013/9/24 (火)
35.
その他のPerlプラグインは? •Gruntで •ユニットテストしたい •コーディング規約のチェックしたい •perldoc出したい •etc... 2013/9/24 (火)
36.
2013/9/24 (火)
37.
Gruntプラグインを 作ってみよう 2013/9/24 (火)
38.
•例例:grunt-‐‑‒watchでソースの変更更を監 視してTest::Moreをgrunt-‐‑‒perlunit を介して実⾏行行する •「こんなのあるかな?」と思ったプラ グインは存在するけどなければ作れば いい Gruntプラグインを 作ってみよう 2013/9/24 (火)
39.
• まずgruntプラグインを漁った • grunt-‐‑‒hash •
grunt-‐‑‒md5 • grunt-‐‑‒hashmap • grunt-‐‑‒rev • grunt-‐‑‒rev-‐‑‒md5 • ちょっと違った • 作って公開した • そしたら… grunt-‐‑‒md5filename 開発の経緯 https://github.com/ishikawam/grunt-md5filename 2013/9/24 (火)
40.
https://github.com/gruntjs/grunt-contrib/issues/164 2013/9/24 (火)
41.
Gruntプラグインのファイル構成例例 • Gruntfile.js • package.json •
README.* • LICENSE-‐‑‒* • tasks/ • node_̲modules/ • .git • .gitignore • .npmignore • .travis.yml • test/ • tmp/ 2013/9/24 (火)
42.
Gruntプラグインの開発にも Gruntを使います 2013/9/24 (火)
43.
% npm init
#package.jsonを生成 % npm publish #公開! % npm info hoge #npmに登録されたのを確認 ⾃自作gruntプラグインをnpmに\公開/ たったこれだけ! 2013/9/24 (火)
44.
2013/9/24 (火)
45.
Grunt利利⽤用のコツ •watchに頼らない •あくまで簡易易で即チェック •manualを定義しておいて、コミット 前に実⾏行行する 2013/9/24 (火)
46.
grunt-‐‑‒contrib-‐‑‒watch •ファイルの変更更を監視して、Gruntタ スクを開始します。 • Live Reload
もできます。 • 連携すればGrowlで通知もでき ます。(grunt-‐‑‒notify) ただしデプロイ前はgrunt manualで 2013/9/24 (火)
47.
Gruntで楽しい コーディングライフを!! 2013/9/24 (火)
48.
本⽇日のサンプルはGithubで 資料料はslideshareで 公開してます。 http://www.slideshare.net/mishikawa55/2013-‐‑‒yapc https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc 2013/9/24 (火)
49.
以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (火)
50.
以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (火)
Baixar agora