まだタスクランナ`聞っていないって云輝┘泪牽拭（吠造する紳併吭R鯢呂里燭瓩 gulp ハンズオン : Wordcamp tokyo 2015
?
1 like?4,145 views
2015定10埖31晩に佩われた〆WordCamp Tokyo 2015〇のハンズオンで旋喘したa怎スライドです。輝晩旋喘したものから駅勣な何蛍だけiしたものです。
![metalsmith.json
{
"source": "_source",
"destination": "./.tmphtml",
"plugins": {
"metalsmith-ignore": [
"_layouts/**/*",
"**/*.scss"
],
"metalsmith-templates": {
"engine": "swig",
"directory": "_source/_layouts"
}
}
}](https://image.slidesharecdn.com/wordcamptokyo2015followup-151114011133-lva1-app6892/85/gulp-Wordcamp-tokyo-2015-23-320.jpg)
![gulp?le.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']);](https://image.slidesharecdn.com/wordcamptokyo2015followup-151114011133-lva1-app6892/85/gulp-Wordcamp-tokyo-2015-24-320.jpg)
まだタスクランナ`聞っていないって云輝┘泪牽拭（吠造する紳併吭R鯢呂里燭瓩 gulp ハンズオン : Wordcamp tokyo 2015
- 1. まだタスクランナ`聞っていないって云輝┘泪牽 碧並にする紳併吭R鯢呂里燭瓩gulpハンズオン HAM WORKS L紅寒 ﾚ冷 photo by spykster https://www.?ickr.com/photos/spykster/6743567521
- 2. 徭失府初
- 3. L紅寒 ﾚ冷 はせがわ ひろむ 徭 失 B 初
- 4. (? ?ム? `) ハム
- 5. フロントエンドエンジニア 惹 テクニカル?ディレクタ` フリ`ランス 崙恬ユニット HAM WORKS / CodeDesign 徭失府初 photo by PRONana B Agyei https://www.?ickr.com/photos/nanagyei/5641647904
- 7. 恬匍のプロジェクト更撹
- 9. フォルダを蛍ける # 音勣ファイルを詞ぜないために ＄ .scssやRs念のファイルなど ＄ アップロ`ド扮の逗困鮗らせる
- 11. photo by myri_bonnie https://www.?ickr.com/photos/myri_bonnie/13218292843
- 12. photo by myri_bonnie https://www.?ickr.com/photos/myri_bonnie/13218292843
- 13. photo by myri_bonnie https://www.?ickr.com/photos/myri_bonnie/13218292843
- 16. %
- 17. だから´ 中宜だって´ photo by myri_bonnie https://www.?ickr.com/photos/myri_bonnie/13218292843
- 18. 床議サイトジェネレ`タ`擬秘
- 22. 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" } }
- 23. metalsmith.json { "source": "_source", "destination": "./.tmphtml", "plugins": { "metalsmith-ignore": [ "_layouts/**/*", "**/*.scss" ], "metalsmith-templates": { "engine": "swig", "directory": "_source/_layouts" } } }
- 24. gulp?le.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']);
- 25. <!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
- 27. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> <?php title(); ?> </title> <?php wp_head(); ?> </head> <body> <header> ~ </header> WordPress : header.php
- 28. <footer> ~ </footer> <?php wp_footer(); ?> </body> </html> WordPress: footer.php
- 29. <?php get_header();?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_content(); ?> <?php endif; ?> <?php get_footer(); ?> WordPress : index.php
- 30. "</>
- 31. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> </head> <body> <header> ~ </header> swig : header.html
- 32. <footer> ~ </footer> </body> </html> swig : footer.html
- 33. {% include 'header.html' %} {{ contents | safe }} {% include 'footer.html' %} swig : layout.html
- 34. --- template: default.html title: "タイトル" --- <div>コンテンツ</div> swig : index.html
- 35. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <header> ~ </header> <div>コンテンツ</div> <footer> ~ </footer> </body> </html> き竃し瘁
- 37. ご賠ありがとうございました
- 38. - https://www.?ickr.com/photos/spykster/6743567521 - https://www.?ickr.com/photos/nanagyei/5641647904 - https://www.?ickr.com/photos/myri_bonnie/13218292843 Photo credit