Upgrade to Pro — share decks privately, control downloads, hide ads and more …

pugを使った効率的なコーディング

 pugを使った効率的なコーディング

広島フロントエンド勉強会 Vol.10のスライド

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

June 12, 2017
Tweet

More Decks by 井上拓

Other Decks in Technology

Transcript

  1. ޿ౡϑϩϯτΤϯυษڧձ Vol.10 PugΛ࢖ͬͨ ޮ཰తͳίʔσΟϯά CodeCode Ҫ্୓

  2. Pugͱ͸

  3. Pugͱ͸ • HTMLΛॻͨ͘ΊͷܰྔͳJavaScriptͰ࡞ΒΕͨςϯϓ ϨʔτΤϯδϯ • CSSʹ͓͚ΔSassͷΑ͏ʹɺHTMLΛޮ཰తʹॻ͘͜ͱ͕ Ͱ͖Δ • هड़ͷলུ΍ϑΝΠϧͷಡΈࠐΈɺม਺΍܁Γฦ͠ɺ৚ ݅෼ذͳͲͷϓϩάϥϜతͳهड़͕Մೳ

    • ΠϯσϯτͱվߦͰهड़
  4. Pugͱ͸ HTML pug ίϯύΠϧ CLI gulp ͳͲ

  5. index.pug doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo)

    bar(1 + 5) body h1 Pug - node template engine #container.col if youAreUsingPug p You are amazing else p Get on it! p. Pug is a terse and simple templating language with a strong focus on performance and powerful features.
  6. index.html <!DOCTYPE html> <html lang="en"> <head> <title>Pug</title> <script type="text/javascript"> if

    (foo) bar(1 + 5) </script> </head> <body> <h1>Pug - node template engine</h1> <div id="container" class="col"> <p>You are amazing</p> <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p> </div> </body> </html>
  7. ։ൃ؀ڥ

  8. ։ൃ؀ڥ Πϯετʔϧ Node.js https://nodejs.org/ja/

  9. ։ൃ؀ڥ $ npm install pug-cli -g Πϯετʔϧ ίϯύΠϧ $ pug

    index.pug --pretty HTML pug index.pug index.html CLI Φϓγϣϯ QSFUUZ ੔ܗͯ͠ग़ྗ PVU<ग़ྗઌ> )5.-ͷग़ྗઌΛࢦఆ
  10. ։ൃ؀ڥ $ npm install gulp-pug Πϯετʔϧ gulp

  11. ։ൃ؀ڥ var gulp = require('gulp'); var pug = require('gulp-pug'); gulp.task('pug',

    function(){ gulp.src('pug/*.pug') .pipe(pug({ pretty: true })) .pipe(gulp.dest(./)) }) gulp.task('watch', function(){ gulp.watch('pug/**/*.pug',['pug']); }); gulp.task('default', ['watch']); gulpfile.js gulp
  12. ։ൃ؀ڥ $ gulp ίϯύΠϧ gulp

  13. pugͷॻ͖ํ
 ʙॳڃฤʙ

  14. ίϝϯτ //- ίϝϯτ HTMLͰ͸ফ͑Δ // ίϝϯτ HTMLʹ΋࢒Δ

  15. υοΫλΠϓ doctype doctype html <!DOCTYPE html> pug HTML

  16. div #id id class .class div͸লུͰ͖Δ <div id=“id”></div> <div class=“class”></div>

  17. img img(src="img.jpg" alt="ը૾") <img src="img.jpg" alt="ը૾">

  18. ଐੑ meta(charset="UTF-8") link(rel=“stylesheet" href="style.css") script(type="application/ld+json") <meta charset="UTF-8"> <link rel="stylesheet" href="common/css/style.css">

    <script type=“application/ld+json"></script> pug HTML
  19. ωετ ul li list1 li list2 li list3 <ul> <li>list1</li>

    <li>list2</li> <li>list3</li> </ul> pug HTML
  20. ωετ ul li a(href=“index.html”) index li: a(href=“index.html”) index <ul> <li><a

    href=“index.html”>index</a></li> <li><a href=“index.html”>index</a></li> </ul> pug HTML
  21. վߦ p Hello br | World <p>Hello<br>World</p> pug HTML

  22. ΠϯϥΠϯ p Pug͸ɺHTMLΛॻͨ͘Ίͷܰྔͳ#[strong JavaScript]Ͱ࡞ΒΕͨ#[em ςϯϓϨʔ τΤϯδϯ]Ͱ͢ɻ <p>Pug͸ɺHTMLΛॻͨ͘Ίͷܰྔͳ<strong>JavaScript</strong>Ͱ ࡞ΒΕͨ<em>ςϯϓϨʔτΤϯδϯ</em>Ͱ͢</p> pug HTML

  23. ΠϯϥΠϯ script. if (foo) bar(1 + 5) <script type=“text/javascript"> if

    (foo) bar(1 + 5) </script> pug HTML
  24. pugͷॻ͖ํ
 ʙதڃฤʙ

  25. ม਺ - var url = "//www.example.com/"; a(href=url) τοϓϖʔδ a(href=url +

    "contact/") ͓໰͍߹Θͤ <a href=”//www.example.com”>τοϓϖʔδ</a> <a href=”//www.example.com/contact/”>͓໰͍߹Θͤ</a> pug HTML
  26. ܁Γฦ͠ ul - for (var i = 0; i <=

    3; i++) { .item li List#{i} - } pug HTML <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul>
  27. ܁Γฦ͠2 - var menu = ["Top", "About", "Works", "Blog", “Contact"];

    ul each val in menu li #{val} pug HTML <ul> <li>Top</li> <li>About</li> <li>Works</li> <li>Blog</li> <li>Contact</li> </ul>
  28. ৚݅෼ذ - var vals = ["home","blog","contact"] each val, index in

    vals if(index%2==0) #item p #{val} else #item2 p #{val} pug HTML <div id="item"> <p>home</p> </div> <div id="item2"> <p>blog</p> </div> <div id="item"> <p>contact</p> </div>
  29. pugͷॻ͖ํ
 ʙ্ڃฤʙ

  30. ΠϯΫϧʔυ • ผͷpugϑΝΠϧΛಡΈࠐΉ͜ͱ͕Ͱ͖Δ • ڞ௨Խ͢Δͱ͖ʹศར include inc/_header.pug

  31. ΠϯΫϧʔυ pug index.pug pug _header.pug pug _footer.pug include include ڞ௨෦෼ΛಡΈࠐΉ

  32. ΠϯΫϧʔυ header h1 Hello World _header.pug index.pug doctype html html(lang="ja")

    head meta(charset="UTF-8") link(rel="stylesheet", href="common/css/style.css") title Document body include _header.pug #main p Hello
  33. ΠϯΫϧʔυ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <link rel="stylesheet"

    href="common/css/style.css"/> <title>Document</title> </head> <body> <header> <h1>Hello World</h1> </header> <div id="main"> <p>Hello</p> </div> </body> </html> index.html
  34. ςϯϓϨʔτ • ςϯϓϨʔτϑΝΠϧΛܧঝͯ͠ɺࠩ෼ΛຒΊ ࠐΉ extend inc/_template.pug block nav

  35. ςϯϓϨʔτ pug index.pug pug _template.pug pug _page.pug extends extends ڞ௨෦෼ʹ͸ΊࠐΉ

  36. ςϯϓϨʔτ doctype html html(lang="ja") head meta(charset="UTF-8") link(rel="stylesheet", href="common/css/style.css") block link

    block title body header h1 Hello World block content footer p &copy;2017 hirofuro.org. block script _template.pug
  37. ςϯϓϨʔτ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet"

    href=“common/css/ style.css"> <link rel="stylesheet" href="common/ css/index.css"> <title>index | hirofuro.org</title> </head> <body> <header> <h1>Hello World</h1> </header> <div id="main"> <h1>Hello index</h1> </div> <footer> <p>&copy;2017 hirofuro.org.</p> </footer> </body> <script src="https://ajax.googleapis.com/ ajax/libs/jquery/3.2.1/jquery.min.js"></ script> </html> index.html page.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="common/css/style.css"> <link rel="stylesheet" href="common/css/page.css"> <title>page | hirofuro.org</title> </head> <body> <header> <h1>Hello World</h1> </header> <div id="main"> <h1>Hello page</h1> </div> <footer> <p>&copy;2017 hirofuro.org.</p> </footer> </body> </html>
  38. ϛοΫεΠϯ • ؔ਺ͷΑ͏ͳ΋ͷΛͭ͘Δ • ௚઀ॻ͔͘ɺmixinϑΝΠϧΛΠϯΫϧʔυ͢Δ extend mixin/_mixin.pug -mixin()

  39. ϛοΫεΠϯ mixin nav(now) - var list = ['home', 'page', 'contact']

    ul.gNav each item in list - var name = item.toUpperCase() if now == item li.now: a(href=item + '.html') #{name} else li: a(href=item + '.html') #{name} _mixin.pug index.pug include mixin/_mixin.pug doctype html html(lang="ja") head meta(charset="UTF-8") link(rel="stylesheet", href="common/css/style.css") body header h1 Hello World nav --nav(“home”)
  40. ςϯϓϨʔτ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet"

    href="common/css/style.css"> </head> <body> <header> <h1>Hello World</h1> <nav> <ul class="gNav"> <li class="now"><a href="home.html">HOME</a></li> <li><a href="page.html">PAGE</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> </header> </body> </html> index.html
  41. ·ͱΊ

  42. ·ͱΊ • HTMLΛলུͯ͠ॻ͘͜ͱ͕Ͱ͖Δ • ϓϩάϥϜతͳॲཧΛೖΕͯޮ཰Խ • ΠϯΫϧʔυ΍ςϯϓϨʔτͰڞ௨Խ

  43. ͨͩ͠

  44. ઃܭ͕͙ͪΌ͙ͪΌͩͱ ௨ৗͷHTMLΑΓΧΦεʹͳΔ

  45. ͋Γ͕ͱ͏͍͟͝·ͨ͠