![16
p
| text text text ´
<p>
text text text ´
</p>
Pug
HTML
? タグの<>を福待できる
? ]じタグが音勣](https://image.slidesharecdn.com/pug-170626031918/85/Pug-Jade-16-320.jpg)
![17
p.info#info
| text text text ´
<p class="info" id="info">
text text text ´
</p>
Pug
HTML
? タグの<>を福待できる
? ]じタグが音勣
? クラスやIDをgに尅れる](https://image.slidesharecdn.com/pug-170626031918/85/Pug-Jade-17-320.jpg)
![18
? タグの<>を福待できる
? ]じタグが音勣
? クラスやIDをgに尅れる
? インデントがタグのA
section
ul
li
| My list
<section>
<ul>
<li>My list</li>
</ul>
</head>
Pug
HTML](https://image.slidesharecdn.com/pug-170626031918/85/Pug-Jade-18-320.jpg)
![19
- var title = "My Page"
head
title
| #
<head>
<title>My Page</title>
</head>
Pug
HTML
? タグの<>を福待できる
? ]じタグが音勣
? クラスやIDをgに尅れる
? インデントがタグのA
? 篳を聞える](https://image.slidesharecdn.com/pug-170626031918/85/Pug-Jade-19-320.jpg)
![20
? タグの<>を福待できる
? ]じタグが音勣
? クラスやIDをgに尅れる
? インデントがタグのA
? 篳を聞える
? ファイル蛍護できる
_layout.pug
_header.pug
_footer.pug
index.pug](https://image.slidesharecdn.com/pug-170626031918/85/Pug-Jade-20-320.jpg)
![21
? タグの<>を福待できる
? ]じタグが音勣
? クラスやIDをgに尅れる
? インデントがタグのA
? 篳を聞える
? ファイル蛍護できる
弖紗するペ`ジは、
ここだけけばよい
_layout.pug
_header.pug
_footer.pug
index.pug](https://image.slidesharecdn.com/pug-170626031918/85/Pug-Jade-21-320.jpg)
Pug(Jade)を聞って コンテンツき竃しの r玉をしよう
- 2. 2 エクスコ`ド幄塀氏芙 ? The Company に並嬲 フロントエンドエンジニア ? 麼にマ`クアップ ? webアプリ崙恬もはじめました NEW グロ`スハッカ` ? KAIZEN PLATFORM |曝フロントエンド茶氏 ? |偏酎センタ`JR認壼k念 挑淫 拭祇┐垢┐ね としみち Photo: 梳 簓譯┘汽?スタジオ
- 7. 7 pugjs.org
- 11. 11 gulpjs.com
- 12. 12 + = HTML
- 13. 13 + = HTML でいて で荷恬
- 14. 14 Pugは採が`うのか
- 15. 15 p | text text text ´ <p> text text text ´ </p> Pug HTML ? タグの<>を福待できる
- 16. 16 p | text text text ´ <p> text text text ´ </p> Pug HTML ? タグの<>を福待できる ? ]じタグが音勣
- 17. 17 p.info#info | text text text ´ <p class="info" id="info"> text text text ´ </p> Pug HTML ? タグの<>を福待できる ? ]じタグが音勣 ? クラスやIDをgに尅れる
- 18. 18 ? タグの<>を福待できる ? ]じタグが音勣 ? クラスやIDをgに尅れる ? インデントがタグのA section ul li | My list <section> <ul> <li>My list</li> </ul> </head> Pug HTML
- 19. 19 - var title = "My Page" head title | # <head> <title>My Page</title> </head> Pug HTML ? タグの<>を福待できる ? ]じタグが音勣 ? クラスやIDをgに尅れる ? インデントがタグのA ? 篳を聞える
- 20. 20 ? タグの<>を福待できる ? ]じタグが音勣 ? クラスやIDをgに尅れる ? インデントがタグのA ? 篳を聞える ? ファイル蛍護できる _layout.pug _header.pug _footer.pug index.pug
- 21. 21 ? タグの<>を福待できる ? ]じタグが音勣 ? クラスやIDをgに尅れる ? インデントがタグのA ? 篳を聞える ? ファイル蛍護できる 弖紗するペ`ジは、 ここだけけばよい _layout.pug _header.pug _footer.pug index.pug
- 25. 25 チ`ム崙恬の並箭
- 26. 26 匳Cv CMS / 20ペ`ジ / 1Lg
- 27. 27 ? CMS秘 ? オリジナルテ`マ ? 匳の毅輝燕をCMS坪に隔ち 昧r厚仟したい ? s30ペ`ジ ? {豚はs1Lg 匳CvCMS / 20ペ`ジ / 1Lg SAMPLE
- 28. 28 匳CvCMS / 20ペ`ジ / 1Lg {豚が掲械にしいSAMPLE
- 29. 29 匳CvCMS / 20ペ`ジ / 1Lg チ`ムで盾QしようSAMPLE
- 30. 30 匳CvCMS / 20ペ`ジ / 1Lg ? 慌宥何蛍はこちらで恬撹し、コ ンテンツ何蛍をおいしたい ? そのgに匳毅輝燕などCMS まわりをKわらせる ? ファイルの貧きは閲けたい ? OSが詞壓 ? 恬Ih廠もなる SAMPLE
- 31. 31 Pug Sass gulp 匳CvCMS / 20ペ`ジ / 1Lg git SAMPLE
- 32. 32 HTML CSS 屁侘 匳CvCMS / 20ペ`ジ / 1Lg 崙恬麗の揖豚 SAMPLE
- 33. 33 匳CvCMS / 20ペ`ジ / 1Lg トップペ`ジ 和咼擧`ジ テ`マ 慌宥何蛍 CMSまわり SAMPLE
- 34. 34 匳CvCMS / 20ペ`ジ / 1Lg {豚坪にo並{瞳SAMPLE
- 35. 35 縮圄Cv CMS / 150ペ`ジ / 6仏O / 5Lg
- 36. 36 ? CMS秘 ? オリジナルテ`マ ? 6仏O / 6サイト ? マルチサイト ? サイトごとに勣周がなる ? 畠悶でs150ペ`ジ ? {豚はs5Lg 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 37. 37 {豚が犁韻しい 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 38. 38 チ`ムで盾Qしよう 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 39. 39 ? 仏Oごとにr侏を恬撹し、コン テンツ何蛍をおいしたい ? 繁方が謹いのでM佩砿尖で} が竃そう ? コンフリクトとかでrgを函り たくない 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 40. 40 Pug Sass gulp gitスプレッドシ`ト 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 41. 41 HTML CSS 屁侘 崙恬麗の揖豚毅輝パ`トの砿尖 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 42. 42 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg ? 光繁のリソ`スを_J ? スプレッドシ`トで毅輝パ`ト をかく砿尖 ? 1ペ`ジ1Pug ? 1グル`プ1Sass ? クラス兆にはペ`ジ喘俊^看 ? コンフリクトしようがないよう にする SAMPLE
- 43. 43 Pug テ`マ Scss 慌宥何蛍 Pug x 150 Sass x 50 x 6 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg r侏 SAMPLE
- 44. 44 {豚坪にo並{瞳 縮圄CvCMS / 150ペ`ジ / 6仏O / 5Lg SAMPLE
- 45. 45 署蛮Cv HTML / 80ペ`ジ / 8Lg
- 46. 46 ? 床議HTML ? ペ`ジごとにCSSを蛍ける ? gC編^20N ? 畠悶でs80ペ`ジ ? {豚はs8Lg ? システムに函りzむ 署蛮CvHTML / 80ペ`ジ / 8Lg SAMPLE
- 47. 47 署蛮CvHTML / 80ペ`ジ / 8Lg ? HTMLを{瞳★システム氏芙が Mみzみという送れ ? HTML恬撹とシステムMみzみ は揖rM佩 ? コ`ディングがWれるとシステ ム箸rgがojになる SAMPLE
- 48. 48 署蛮CvHTML / 80ペ`ジ / 8Lg gC編^20Nの 塞がiめない SAMPLE
- 49. 49 署蛮CvHTML / 80ペ`ジ / 8Lg チ`ムで盾QしようSAMPLE
- 50. 50 署蛮CvHTML / 80ペ`ジ / 8Lg Pug Sass gulp git スプレッドシ`ト gCとブラウザ20N SAMPLE
- 51. 51 署蛮CvHTML / 80ペ`ジ / 8Lg HTML CSS 屁侘 崙恬麗の揖豚 M佩砿尖 gC編^ SAMPLE
- 52. 52 署蛮CvHTML / 80ペ`ジ / 8Lg Pug Sass 52 gC編^ 何の{屁?{瞳 SAMPLE
- 53. 53 署蛮CvHTML / 80ペ`ジ / 8Lg 53 W决なく脅業{瞳SAMPLE
- 57. 57 チ`ム崙恬には駅勣音辛之
- 58. 58 で、gHどうするの
- 59. 59 デモ Pug ★ HTML
- 61. 61 _header.pug pug _layout.pug conf.json outline.pug index.pug _footer.pug dev package.json gulpfile.js gulp-pug ´ pugファイル匯塀 ´ npm install で秘れるパッケ`ジの秤 ´ gulp でg佩するタスク
- 62. 62 $ cd pug $ npm install Node.js 秘gみの圭は gHにしていただけます。
- 63. 63 Demo
- 64. 64 いかがでしょうか
- 65. 65 書指の朕議
- 69. 69 <h1>GULP PUG Dummy へようこそ</h1> <p><img src=/slideshow/pugjade/77252744/"/cms/themes/original/assets/img/cover.jpg"></p> <p>あなたは 1,215 繁朕のL宀です。</p> <section class="topics"> <h2>トピックス</h2> <ul> <li><a href="#">駻断鵑鮓仟しました</a></li> <li><a href="#">定挑定兵俚Iのお岑らせ</a></li> <li><a href="#">歪湿俚Iのお岑らせ</a></li> </ul> </section>
- 70. 70 デモ Pug ★ HTML / Pug ★ CMS喘テキスト
- 72. 72 _header.pug pug _layout.pug conf.json outline.pug index.pug _footer.pug dev package.json gulpfile.js gulp-pug ´ pugファイル匯塀 ´ npm install で秘れるパッケ`ジの秤 ´ gulp でg佩するタスク
- 73. 73 _header.pug pug _layout.pug conf.json outline.pug index.pug _footer.pug dev package.json gulpfile.js gulp-pug ´ pugファイル匯塀 ´ npm install で秘れるパッケ`ジの秤 ´ gulp でg佩するタスク conf-cms.json
- 74. 74 $ cd pug-cms $ npm install Node.js 秘gみの圭は gHにしていただけます。
- 75. 75 Demo
- 79. 79 ありがとうございました