Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015

3,320 views

Published on

2015年10月31日に行われた『WordCamp Tokyo 2015』のハンズオンで利用した補足スライドです。当日利用したものから必要な部分だけ抜粋したものです。

Published in: Technology
  • Be the first to comment

まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015

  1. 1. まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のためのgulpハンズオン HAM WORKS 長谷川 広武 photo by spykster https://www.flickr.com/photos/spykster/6743567521
  2. 2. 自己紹介
  3. 3. 長谷川 広武 はせがわ ひろむ 自 己 紹 介
  4. 4. (́ ºムº `) ハム
  5. 5. フロントエンドエンジニア 兼 テクニカル・ディレクター フリーランス 制作ユニット HAM WORKS / CodeDesign 自己紹介 photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
  6. 6. !</> !{css} !{JS} " System Templates
  7. 7. 作業のプロジェクト構成
  8. 8. 作業用と書き出し用を分ける
  9. 9. フォルダを分ける? # 不要ファイルを混ぜないために ○ .scssや圧縮前のファイルなど ○ アップロード時の苦労を減らせる
  10. 10. nodeのバージョンマネージャを使う
  11. 11. photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
  12. 12. photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
  13. 13. photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
  14. 14. CMS テンプレート前の HTMLテンプレート
  15. 15. !</> !{css} !{JS} " WordPress Theme
  16. 16. %
  17. 17. だから… 面倒だって… photo by myri_bonnie https://www.flickr.com/photos/myri_bonnie/13218292843
  18. 18. 静的サイトジェネレーター導入
  19. 19. http://www.metalsmith.io/
  20. 20. http://handlebarsjs.com/
  21. 21. http://paularmstrong.github.io/swig/
  22. 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. 23. metalsmith.json { "source": "_source", "destination": "./.tmphtml", "plugins": { "metalsmith-ignore": [ "_layouts/**/*", "**/*.scss" ], "metalsmith-templates": { "engine": "swig", "directory": "_source/_layouts" } } }
  24. 24. 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']);
  25. 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
  26. 26. ! WordPress Theme
  27. 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. 28. <footer> ~ </footer> <?php wp_footer(); ?> </body> </html> WordPress: footer.php
  29. 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. 30. "</>
  31. 31. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> </head> <body> <header> ~ </header> swig : header.html
  32. 32. <footer> ~ </footer> </body> </html> swig : footer.html
  33. 33. {% include 'header.html' %} {{ contents | safe }} {% include 'footer.html' %} swig : layout.html
  34. 34. --- template: default.html title: "タイトル" --- <div>コンテンツ</div> swig : index.html
  35. 35. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <header> ~ </header> <div>コンテンツ</div> <footer> ~ </footer> </body> </html> 書き出し後
  36. 36. "</> "{css} "{JS} ! 各種 テーマやテンプレート
  37. 37. ご清聴ありがとうございました
  38. 38. - https://www.flickr.com/photos/spykster/6743567521 - https://www.flickr.com/photos/nanagyei/5641647904 - https://www.flickr.com/photos/myri_bonnie/13218292843 Photo credit

×