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

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

Pugͱ͸

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

Pugͱ͸ HTML pug ίϯύΠϧ CLI gulp ͳͲ

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.

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>

։ൃ؀ڥ

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

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

։ൃ؀ڥ $ npm install gulp-pug Πϯετʔϧ gulp

։ൃ؀ڥ 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']); gulpﬁle.js gulp

։ൃ؀ڥ $ gulp ίϯύΠϧ gulp

pugͷॻ͖ํ  ʙॳڃฤʙ

ίϝϯτ //- ίϝϯτ HTMLͰ͸ফ͑Δ // ίϝϯτ HTMLʹ΋࢒Δ

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

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

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

ଐੑ 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

ωετ ul li list1 li list2 li list3 <ul> <li>list1</li>
<li>list2</li> <li>list3</li> </ul> pug HTML

ωετ 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

վߦ p Hello br | World <p>Hello<br>World</p> pug HTML

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

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

pugͷॻ͖ํ  ʙதڃฤʙ

ม਺ - 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

܁Γฦ͠ 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>

܁Γฦ͠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>

৚݅෼ذ - 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>

pugͷॻ͖ํ  ʙ্ڃฤʙ

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

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

ΠϯΫϧʔυ 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

ΠϯΫϧʔυ <!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

ςϯϓϨʔτ • ςϯϓϨʔτϑΝΠϧΛܧঝͯ͠ɺࠩ෼ΛຒΊ ࠐΉ extend inc/_template.pug block nav

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

ςϯϓϨʔτ 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 ©2017 hirofuro.org. block script _template.pug

ςϯϓϨʔτ <!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>©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>©2017 hirofuro.org.</p> </footer> </body> </html>

ϛοΫεΠϯ • ؔ਺ͷΑ͏ͳ΋ͷΛͭ͘Δ • ௚઀ॻ͔͘ɺmixinϑΝΠϧΛΠϯΫϧʔυ͢Δ extend mixin/_mixin.pug -mixin()

ϛοΫεΠϯ 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”)

ςϯϓϨʔτ <!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

·ͱΊ

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

ͨͩ͠

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

͋Γ͕ͱ͏͍͟͝·ͨ͠

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

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

More Decks by 井上拓

Other Decks in Technology

Featured

Transcript