Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

3.382 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための 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

×