Pug + SCSS + webpackの静的サイト構築環境を考える / LTイベント@クックパッド OthloEvent#44

Pug + SCSS + webpackの静的サイト構築環境を考える / LTイベント@クックパッド OthloEvent#44

Ba679b0ea7dd7f09ee8975848ce9cb23?s=128

Siketyan

March 07, 2019
Tweet

Transcript

  1. Pug + SCSS + webpack の 静的サイト構築環境 を考える Siketyan @

    LTイベント@クックパッド OthloEvent#44
  2. 誰?

  3. Siketyan って誰? • 豊田高専生 (情報工学科 1年) • C# + WPF

    で GUI を書く • C# + ASP.NET Core で API バックエンドを書く • Java や PHP も書く • JetBrains 信者 • Vim と Sublime Text を使う • 2~4スペースインデント派 • よろしくおねがいします Twitter: @siketyan
  4. Webサイトの構築 に何を使っていますか?

  5. モダンなWebサイトの構築方法 • Node.js • Node.js • Node.js • Node.js •

    Node.js • Node.js • Node.js • Node.js
  6. Node.js

  7. Node.js でのWebサイト開発あるある • SCSS での @import や JS での require

    便利がち • とりあえず npm install / yarn add でなんとかなりがち • Node.js がサーバになるのでリバースプロキシしがち サーバは既存のものを使いたいので静的ページを生成したい でもヘッダやフッタは統合したいし @import とか使いたい 静的サイトでも Node.js で開発したい!
  8. </> を書くのはやめにしませんか?

  9. • 記法がとにかくシンプルな HTML プリプロセッサ • div を省略できる • レイアウトの継承などもできる •

    すげーやつ • パグかわいい doctype html html(lang="ja") body main .container section.section#summary h1.title Summary h2.subtitle About me .summary-list article.media figure.media-left Pug (旧: Jade) を使おう
  10. @import を使いたい (npm のパッケージからインポートしたい)

  11. • CSS プリプロセッサ • @import で npm のパッケージからインポートできる (要 node-sass-package-importer)

    • 属性の入れ子ができる • {} を使わずインデントで表記する SASS も存在する • でもコンパイラは node-sass • CSS と互換性がある (CSS の拡張である) @import "~bootstrap" body { padding: 1rem; .container { &.main { margin: 1rem; } } } SCSS を使おう
  12. require() を使いたい (または import)

  13. • npm パッケージから JavaScript (ECMAScript) の モジュールをインポートできる • ぜんぶまとめて一つの .js

    ファイルに出力できる const $ = require("jquery"); // or import jquery webpack を使おう
  14. ビルドがめんどい

  15. • SCSS や webpack のビルドをまとめて管理できる (要 gulp-sass, webpack-stream) • gulpfile.js

    を書くだけ • webpack をそのまま使うより設定が簡単 • バージョン4でいろいろ変わって混乱しがち const gulp = require("gulp"); gulp.task("scss", function () { return gulp.src("./src/scss/*.scss") .pipe(sass()) .pipe(gulp.dest("./dist/bundle.scss")); }); Gulp.js を使おう
  16. まとめ

  17. ぼくの考える最強の静的サイト構築環境 • Node.js • Yarn • Gulp.js • Pug •

    SCSS • webpack ほかにいい方法があったら教えてください!
  18. 宣伝 今回紹介した環境で個人サイトを作り直しました https://siketyan.dev/ (ソース: https://github.com/Siketyan/siketyan.dev) 動きます

  19. ご清聴ありがとうございました