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

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.ｊｓ • 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. ご清聴ありがとうございました