$30 off During Our Annual Pro Sale. View Details »

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

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

Naoki Ikeguchi

March 07, 2019
Tweet

More Decks by Naoki Ikeguchi

Other Decks in Programming

Transcript

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

    View Slide

  2. 誰?

    View Slide

  3. Siketyan って誰?
    • 豊田高専生 (情報工学科 1年)
    • C# + WPF で GUI を書く
    • C# + ASP.NET Core で API バックエンドを書く
    • Java や PHP も書く
    • JetBrains 信者
    • Vim と Sublime Text を使う
    • 2~4スペースインデント派
    • よろしくおねがいします
    Twitter: @siketyan

    View Slide

  4. Webサイトの構築 に何を使っていますか?

    View Slide

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

    View Slide

  6. Node.js

    View Slide

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

    View Slide

  8. > を書くのはやめにしませんか?

    View Slide

  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) を使おう

    View Slide

  10. @import を使いたい
    (npm のパッケージからインポートしたい)

    View Slide

  11. • CSS プリプロセッサ
    • @import で npm のパッケージからインポートできる
    (要 node-sass-package-importer)
    • 属性の入れ子ができる
    • {} を使わずインデントで表記する
    SASS も存在する
    • でもコンパイラは node-sass
    • CSS と互換性がある
    (CSS の拡張である)
    @import "~bootstrap"
    body {
    padding: 1rem;
    .container {
    &.main {
    margin: 1rem;
    }
    }
    }
    SCSS を使おう

    View Slide

  12. require() を使いたい
    (または import)

    View Slide

  13. • npm パッケージから JavaScript (ECMAScript) の
    モジュールをインポートできる
    • ぜんぶまとめて一つの .js ファイルに出力できる
    const $ = require("jquery");
    // or
    import jquery
    webpack を使おう

    View Slide

  14. ビルドがめんどい

    View Slide

  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 を使おう

    View Slide

  16. まとめ

    View Slide

  17. ぼくの考える最強の静的サイト構築環境
    • Node.js
    • Yarn
    • Gulp.js
    • Pug
    • SCSS
    • webpack
    ほかにいい方法があったら教えてください!

    View Slide

  18. 宣伝
    今回紹介した環境で個人サイトを作り直しました
    https://siketyan.dev/
    (ソース: https://github.com/Siketyan/siketyan.dev)
    動きます

    View Slide

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

    View Slide