Embed Size (px)
Citation preview
まだタスクランナー使っていないって本当（マジ）？ 仕事に対する効率化意識向上のためのgulpハンズオン
HAM WORKS 長谷川 広武
photo by spykster https://www.flickr.com/photos/spykster/6743567521
自己紹介
長谷川 広武はせがわ ひろむ
自 己 紹 介
(́ ºムº `)
ハム
フロントエンドエンジニア 兼 テクニカル・ディレクター
フリーランス 制作ユニット HAM WORKS / CodeDesign
自己紹介
photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
!</>
!{css}
!{JS}"
System Templates
作業のプロジェクト構成
作業用と書き出し用を分ける
フォルダを分ける？
# 不要ファイルを混ぜないために ○ .scssや圧縮前のファイルなど ○ アップロード時の苦労を減らせる
nodeのバージョンマネージャを使う
photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
CMS テンプレート前の HTMLテンプレート
!</>
!{css}
!{JS}"
WordPress Theme
%
だから…面倒だって…
photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
静的サイトジェネレーター導入
package.json
{ "private": true, "devDependencies": { "browser-sync": "^2.9.10", "gulp": "^3.9.0", "gulp-sass": "^2.0.4", "metalsmith": "^2.1.0", "metalsmith-ignore": "^0.1.2", "metalsmith-templates": "^0.7.0", "swig": "^1.4.2" }, "scripts": { "metalsmith": "metalsmith" } }
metalsmith.json
{ "source": "_source", "destination": "./.tmphtml", "plugins": { "metalsmith-ignore": [ "_layouts/**/*", "**/*.scss" ], "metalsmith-templates": { "engine": "swig", "directory": "_source/_layouts" } } }
gulpfile.js
～省略～ gulp.task('serve', [‘xxx’, ‘html'], function() { ～省略～ });
gulp.task('metalsmith-build', function (done) { return require(‘child_process') .spawn('npm', ['run', 'metalsmith'], {stdio: 'inherit'}) .on('close', done); });
gulp.task('html', ['metalsmith-build'], function () { return gulp.src(['.tmphtml/**/*.html']) .pipe(gulp.dest('html')) .pipe(browserSync.stream()); });
gulp.task('default', ['serve']);
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <header> ~ </header> <div>コンテンツ</div> <footer> ~ </footer> </body> </html>
HTML
header
各ページ
footer
!
WordPress Theme
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> <?php title(); ?> </title> <?php wp_head(); ?> </head> <body> <header> ~ </header>
WordPress : header.php
<footer> ~ </footer> <?php wp_footer(); ?> </body> </html>
WordPress: footer.php
<?php get_header();?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endif; ?>
<?php get_footer(); ?>
WordPress : index.php
"</>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> </head> <body> <header> ~ </header>
swig : header.html
<footer> ~ </footer> </body> </html>
swig : footer.html
{% include 'header.html' %} {{ contents | safe }} {% include 'footer.html' %}
swig : layout.html
--- template: default.html title: "タイトル" ---
<div>コンテンツ</div>
swig : index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <header> ~ </header> <div>コンテンツ</div> <footer> ~ </footer> </body> </html>
書き出し後
"</>
"{css}
"{JS}!
各種 テーマやテンプレート
ご清聴ありがとうございました
- https://www.flickr.com/photos/spykster/6743567521 - https://www.flickr.com/photos/nanagyei/5641647904 - https://www.flickr.com/photos/myri_bonnie/13218292843
Photo credit
