フロントエンド制作向けビルド
ツールGruntがバックエンド
開発でも意外と使える!
@M_̲Ishikawa
〜~PerlとGruntが恋をした〜~
2013/9/24 (火)
本⽇日の⽬目標
•Gruntがなにかを知る
•Perl開発でGruntの使い道を知る
•Gruntプラグインを⾃自分で開発できる
ようにする
⼊入⾨門者向けの内容です
2013/9/24 (火)
Perlの話は…
ほんの少し…
だけど
2013/9/24 (火)
•⾃自⼰己紹介
•Gruntとは
•Gruntの動作環境
•Gruntプラグイン
•Gruntの使い所
•導⼊入までの流流れ
•デモ
•プラグインを作ってみよう
•Grunt利利⽤用のコツ
本⽇日のメニュー
2013/9/24 (火)
⾃自⼰己紹介
2013/9/24 (火)
•Masayuki  Ishikawa
•@M_̲Ishikawa
•id:ishikawam
•GREEでブラウザソーシャルゲームの開発エンジニア
•去年年のYAPCでLTデビュー
•「おせっかい駆動開発のススメ」
•「ドヤリング型開発」を提...
•スタバなどのカフェでMacbook開いて
ドヤ顔でコーディングする近代の開発
⼿手法
•検索索ワード:ドヤラー、ドヤリング
ドヤリング型開発とは
https://www.google.co.jp/search?q=ドヤリング&tbm=isch...
Gruntとは
2013/9/24 (火)
http://gruntjs.com/
2013/9/24 (火)
2013/9/24 (火)
id:naoya  公認
2013/9/24 (火)
•最近のHTMLとかCSSのイベント・カンファレンスで
使っているのをよく⾒見見かける
•講演内容がGruntではなくても、講演者はGrunt使⽤用
が前提でセッションを進めてたり
•フロントエンド開発では結構当たり前に使っている
•デザイナー...
この機会に名前だけでも
覚えていって下さい
2013/9/24 (火)
• node.js製のフロントエンド開発⽀支援ツール
• フロントエンド関連ファイルのビルドを⾏行行う
• 開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧
縮したりJSを難読化したりCSSプリプロセッサ変換(Sass等)
を...
•依存管理理といったら例例えばこんなの
•CPANとかPEARとかGemは?>パッケージ管理理。
•※npmはパッケージ管理理、依存管理理の両⽅方できる
•git  submoduleではなく機能として利利⽤用できる
npm  のおさらい
ライ...
Gruntの動作環境
•開発環境で使う
•nodeが動けば動く。Macでも、
Windowsでも、Linuxでも
•今回はクライアントMacでデモ
•サーバ上での開発で使⽤用しても
まったく問題なし
2013/9/24 (火)
•デザイナーがMacで制作、Sublime  Text
を使⽤用して⿊黒い画⾯面でGruntを利利⽤用
•エンジニアがターミナルから接続した開発
⽤用サーバ上でプログラミング、そこで
Gruntを利利⽤用
例例えばこんなシチュエーション
201...
•Gruntは枠組みだけ、実態はプラグイ
ンで、これをどう使うか。
•http://gruntjs.com/plugins
•公式 25
•全体 1390
※npm  search  gruntplugin  |  wc  -‐‑‒l  調べ ...
• grunt-‐‑‒contrib(公式プラグイン:25個)でどんなことができるか https://github.com/gruntjs/grunt-‐‑‒contrib
• grunt-‐‑‒contrib-‐‑‒clean Clean  ...
様々なコンバート処理理
nodeunit
uglifyjs
2013/9/24 (火)
• 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま
せんか?
• コンパイル、ビルドのコマンド実⾏行行
• Sass(SCSS,less)を変換、CoffeeScriptを変換
• 本番配布⽤用に画像の圧縮、JSの難読化、CS...
•1.開発環境へnode、Gruntを導⼊入
•ちなみに本番運⽤用サーバへnodeを⼊入れる必要は
ありません!あくまで開発⽀支援で使うのみです。
•2.プロジェクトリポジトリへGruntfile.jsと
package.jsonを⼊入れて、no...
# nodeが入っている前提
% npm -g install grunt-cli
% mkdir ~/hoge
% cd ~/hoge
% npm install grunt --save
1.開発環境へGruntを導⼊入
npmのお作法によ...
•Gruntfile.js
•Gruntの設定ファイル
•package.json
•Gruntで使⽤用するプラグインのパッ
ケージ管理理&依存管理理
2.プロジェクトへ  Gruntfile.js  
と  package.json  を設置
2...
% npm install
3.node_̲modules以下に
Gruntプラグインを構築
package.json  正しく書かれていれば  node_̲modules  ディレクトリ
以下にプラグインがインストールされます。
2013/9...
Gruntデモ
ソース公開してます
https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc
2013/9/24 (火)
Gruntのデモ
• Catalistに載せたBootswatch(Bootstrap)で作ったサンプル試
します
• 今回使⽤用するプラグイン
• Gruntで構⽂文チェック
• grunt-‐‑‒contrib-‐‑‒csslint
• g...
Gruntで構⽂文チェック
•本⽇日の例例
•grunt-‐‑‒contrib-‐‑‒csslint
•cssの構⽂文チェック
•grunt-‐‑‒contrib-‐‑‒jshint
•JSの構⽂文チェック
※チェッカの設定はGruntfile....
Gruntでミニファイ
• プラグイン例例
• grunt-‐‑‒contrib-‐‑‒cssmin cssのミニファイ
• grunt-‐‑‒contrib-‐‑‒uglify JSのミニファイ
• grunt-‐‑‒contrib-‐‑‒i...
※開発⽤用と本番⽤用でDocumentRoot
またはstaticディレクトリを
切切り替えるようにすると捗ります。
2013/9/24 (火)
開発確認⽤用
・読みやすいJS
・読みやすいCSS
デプロイ⽤用
・難読化したJS
・圧縮化したCSS
Write  Code
・CoffeeScript
・Sass(SCSS)
参照先とかDocumentRootを切り替え
/**
* Grun...
GruntでPerl!
•本⽇日の例例
•grunt-‐‑‒perllint
YAPCのために作ってみた
•Perlの構⽂文チェック
2013/9/24 (火)
例例:Perlのソースを監視して
構⽂文チェックを⾛走らせる
2013/9/24 (火)
例例:Perlのソースを監視して
構⽂文チェックを⾛走らせる
grunt-‐‑‒watch  でソースの変更更を監視して
perl  -‐‑‒wc  を  grunt-‐‑‒perllint  を介して実⾏行行する
=
2013/9/24 (火)
その他のPerlプラグインは?
•Gruntで
•ユニットテストしたい
•コーディング規約のチェックしたい
•perldoc出したい
•etc...
2013/9/24 (火)
2013/9/24 (火)
Gruntプラグインを
作ってみよう
2013/9/24 (火)
•例例:grunt-‐‑‒watchでソースの変更更を監
視してTest::Moreをgrunt-‐‑‒perlunit
を介して実⾏行行する
•「こんなのあるかな?」と思ったプラ
グインは存在するけどなければ作れば
いい
Gruntプラグイン...
• まずgruntプラグインを漁った
• grunt-‐‑‒hash
• grunt-‐‑‒md5
• grunt-‐‑‒hashmap
• grunt-‐‑‒rev
• grunt-‐‑‒rev-‐‑‒md5
• ちょっと違った
• 作って公...
https://github.com/gruntjs/grunt-contrib/issues/164
2013/9/24 (火)
Gruntプラグインのファイル構成例例
• Gruntfile.js
• package.json
• README.*
• LICENSE-‐‑‒*
• tasks/
• node_̲modules/
• .git
• .gitignore
•...
Gruntプラグインの開発にも
Gruntを使います
2013/9/24 (火)
% npm init #package.jsonを生成
% npm publish #公開!
% npm info hoge #npmに登録されたのを確認
⾃自作gruntプラグインをnpmに\公開/
たったこれだけ!
2013/9/24 (火)
2013/9/24 (火)
Grunt利利⽤用のコツ
•watchに頼らない
•あくまで簡易易で即チェック
•manualを定義しておいて、コミット
前に実⾏行行する
2013/9/24 (火)
grunt-‐‑‒contrib-‐‑‒watch
•ファイルの変更更を監視して、Gruntタ
スクを開始します。
•  Live  Reload  もできます。
•  連携すればGrowlで通知もでき
ます。(grunt-‐‑‒notify)...
Gruntで楽しい
コーディングライフを!!
2013/9/24 (火)
本⽇日のサンプルはGithubで
資料料はslideshareで
公開してます。
http://www.slideshare.net/mishikawa55/2013-‐‑‒yapc
https://github.com/ishikawam/g...
以上、ご清聴
ありがとうございました!
@M_̲Ishikawa
2013/9/24 (火)
以上、ご清聴
ありがとうございました!
@M_̲Ishikawa
2013/9/24 (火)
Upcoming SlideShare
Loading in …5
×

フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia

6,688 views

Published on

YAPC::Asia Tokyo 2013 発表資料
#yapcasia
grunt, yapc, perl, yapcasia

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,688
On SlideShare
0
From Embeds
0
Number of Embeds
1,893
Actions
Shares
0
Downloads
20
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia

  1. 1. フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_̲Ishikawa 〜~PerlとGruntが恋をした〜~ 2013/9/24 (火)
  2. 2. 本⽇日の⽬目標 •Gruntがなにかを知る •Perl開発でGruntの使い道を知る •Gruntプラグインを⾃自分で開発できる ようにする ⼊入⾨門者向けの内容です 2013/9/24 (火)
  3. 3. Perlの話は… ほんの少し… だけど 2013/9/24 (火)
  4. 4. •⾃自⼰己紹介 •Gruntとは •Gruntの動作環境 •Gruntプラグイン •Gruntの使い所 •導⼊入までの流流れ •デモ •プラグインを作ってみよう •Grunt利利⽤用のコツ 本⽇日のメニュー 2013/9/24 (火)
  5. 5. ⾃自⼰己紹介 2013/9/24 (火)
  6. 6. •Masayuki  Ishikawa •@M_̲Ishikawa •id:ishikawam •GREEでブラウザソーシャルゲームの開発エンジニア •去年年のYAPCでLTデビュー •「おせっかい駆動開発のススメ」 •「ドヤリング型開発」を提唱 2013/9/24 (火)
  7. 7. •スタバなどのカフェでMacbook開いて ドヤ顔でコーディングする近代の開発 ⼿手法 •検索索ワード:ドヤラー、ドヤリング ドヤリング型開発とは https://www.google.co.jp/search?q=ドヤリング&tbm=isch おさらい 2013/9/24 (火)
  8. 8. Gruntとは 2013/9/24 (火)
  9. 9. http://gruntjs.com/ 2013/9/24 (火)
  10. 10. 2013/9/24 (火)
  11. 11. id:naoya  公認 2013/9/24 (火)
  12. 12. •最近のHTMLとかCSSのイベント・カンファレンスで 使っているのをよく⾒見見かける •講演内容がGruntではなくても、講演者はGrunt使⽤用 が前提でセッションを進めてたり •フロントエンド開発では結構当たり前に使っている •デザイナーが「⿊黒い画⾯面」といいだしたのはGruntを 触るのがきっかけ?(実際はcompassとかsassとか gitとかだけど) でも我々Perlerにはほとんど縁がない! 2013/9/24 (火)
  13. 13. この機会に名前だけでも 覚えていって下さい 2013/9/24 (火)
  14. 14. • node.js製のフロントエンド開発⽀支援ツール • フロントエンド関連ファイルのビルドを⾏行行う • 開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧 縮したりJSを難読化したりCSSプリプロセッサ変換(Sass等) をしたりテストしたり  etc... • プラグインによりツールを拡張できる • プラグインの開発が簡単(node=JS) • Gruntプラグイン=nodeモジュールなのでnpmで管理理されてます Gruntとは 2013/9/24 (火)
  15. 15. •依存管理理といったら例例えばこんなの •CPANとかPEARとかGemは?>パッケージ管理理。 •※npmはパッケージ管理理、依存管理理の両⽅方できる •git  submoduleではなく機能として利利⽤用できる npm  のおさらい ライブラリの依存管理理 2013/9/24 (火)
  16. 16. Gruntの動作環境 •開発環境で使う •nodeが動けば動く。Macでも、 Windowsでも、Linuxでも •今回はクライアントMacでデモ •サーバ上での開発で使⽤用しても まったく問題なし 2013/9/24 (火)
  17. 17. •デザイナーがMacで制作、Sublime  Text を使⽤用して⿊黒い画⾯面でGruntを利利⽤用 •エンジニアがターミナルから接続した開発 ⽤用サーバ上でプログラミング、そこで Gruntを利利⽤用 例例えばこんなシチュエーション 2013/9/24 (火)
  18. 18. •Gruntは枠組みだけ、実態はプラグイ ンで、これをどう使うか。 •http://gruntjs.com/plugins •公式 25 •全体 1390 ※npm  search  gruntplugin  |  wc  -‐‑‒l  調べ  2013/9/12現在 Gruntプラグイン 2013/9/24 (火)
  19. 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. 20. 様々なコンバート処理理 nodeunit uglifyjs 2013/9/24 (火)
  21. 21. • 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま せんか? • コンパイル、ビルドのコマンド実⾏行行 • Sass(SCSS,less)を変換、CoffeeScriptを変換 • 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ • 規則正しく予想できるファイル名(card1.png,card2.png,...) へ直接アクセスされないように隠蔽するのにハッシュのリネーム • CDNのキャッシュをクリアするために⾛走らせているコマンド • srcにパラメータ付与、ファイル名変更更、等 • テストの実⾏行行 • Lint,  シンタックスチェック,  UNITテスト,等 • その他、無限の可能性が...!!! Gruntの使いどころ 2013/9/24 (火)
  22. 22. •1.開発環境へnode、Gruntを導⼊入 •ちなみに本番運⽤用サーバへnodeを⼊入れる必要は ありません!あくまで開発⽀支援で使うのみです。 •2.プロジェクトリポジトリへGruntfile.jsと package.jsonを⼊入れて、node_̲modules を.gitignoreに⼊入れる •3.各開発環境では  npm  install  を実⾏行行して node_̲modules以下にGruntプラグインを構築 Grunt導⼊入までの流流れ 2013/9/24 (火)
  23. 23. # nodeが入っている前提 % npm -g install grunt-cli % mkdir ~/hoge % cd ~/hoge % npm install grunt --save 1.開発環境へGruntを導⼊入 npmのお作法により、プロジェクトごとにインストールする 2013/9/24 (火)
  24. 24. •Gruntfile.js •Gruntの設定ファイル •package.json •Gruntで使⽤用するプラグインのパッ ケージ管理理&依存管理理 2.プロジェクトへ  Gruntfile.js   と  package.json  を設置 2013/9/24 (火)
  25. 25. % npm install 3.node_̲modules以下に Gruntプラグインを構築 package.json  正しく書かれていれば  node_̲modules  ディレクトリ 以下にプラグインがインストールされます。 2013/9/24 (火)
  26. 26. Gruntデモ ソース公開してます https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc 2013/9/24 (火)
  27. 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. 28. Gruntで構⽂文チェック •本⽇日の例例 •grunt-‐‑‒contrib-‐‑‒csslint •cssの構⽂文チェック •grunt-‐‑‒contrib-‐‑‒jshint •JSの構⽂文チェック ※チェッカの設定はGruntfile.js内 Optionsで細かく指定できます。 2013/9/24 (火)
  29. 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. 30. ※開発⽤用と本番⽤用でDocumentRoot またはstaticディレクトリを 切切り替えるようにすると捗ります。 2013/9/24 (火)
  31. 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. 32. GruntでPerl! •本⽇日の例例 •grunt-‐‑‒perllint YAPCのために作ってみた •Perlの構⽂文チェック 2013/9/24 (火)
  33. 33. 例例:Perlのソースを監視して 構⽂文チェックを⾛走らせる 2013/9/24 (火)
  34. 34. 例例:Perlのソースを監視して 構⽂文チェックを⾛走らせる grunt-‐‑‒watch  でソースの変更更を監視して perl  -‐‑‒wc  を  grunt-‐‑‒perllint  を介して実⾏行行する = 2013/9/24 (火)
  35. 35. その他のPerlプラグインは? •Gruntで •ユニットテストしたい •コーディング規約のチェックしたい •perldoc出したい •etc... 2013/9/24 (火)
  36. 36. 2013/9/24 (火)
  37. 37. Gruntプラグインを 作ってみよう 2013/9/24 (火)
  38. 38. •例例:grunt-‐‑‒watchでソースの変更更を監 視してTest::Moreをgrunt-‐‑‒perlunit を介して実⾏行行する •「こんなのあるかな?」と思ったプラ グインは存在するけどなければ作れば いい Gruntプラグインを 作ってみよう 2013/9/24 (火)
  39. 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. 40. https://github.com/gruntjs/grunt-contrib/issues/164 2013/9/24 (火)
  41. 41. Gruntプラグインのファイル構成例例 • Gruntfile.js • package.json • README.* • LICENSE-‐‑‒* • tasks/ • node_̲modules/ • .git • .gitignore • .npmignore • .travis.yml • test/ • tmp/ 2013/9/24 (火)
  42. 42. Gruntプラグインの開発にも Gruntを使います 2013/9/24 (火)
  43. 43. % npm init #package.jsonを生成 % npm publish #公開! % npm info hoge #npmに登録されたのを確認 ⾃自作gruntプラグインをnpmに\公開/ たったこれだけ! 2013/9/24 (火)
  44. 44. 2013/9/24 (火)
  45. 45. Grunt利利⽤用のコツ •watchに頼らない •あくまで簡易易で即チェック •manualを定義しておいて、コミット 前に実⾏行行する 2013/9/24 (火)
  46. 46. grunt-‐‑‒contrib-‐‑‒watch •ファイルの変更更を監視して、Gruntタ スクを開始します。 •  Live  Reload  もできます。 •  連携すればGrowlで通知もでき ます。(grunt-‐‑‒notify) ただしデプロイ前はgrunt  manualで 2013/9/24 (火)
  47. 47. Gruntで楽しい コーディングライフを!! 2013/9/24 (火)
  48. 48. 本⽇日のサンプルはGithubで 資料料はslideshareで 公開してます。 http://www.slideshare.net/mishikawa55/2013-‐‑‒yapc https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc 2013/9/24 (火)
  49. 49. 以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (火)
  50. 50. 以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (火)

×