Zenn
🚀

Dart Sass × FLOCSS コーディング用のgulpキットを作成しました

2021/12/11に公開
Gulp
HTML
Sass
Scss
コーディング
tech

世間ではTailwind CSS が盛り上がっていますが、何やかんやWEBサイト構築とかではSassがまだまだ現役な印象。

とはいえ、SassはSassでも一番浸透しているLib Sassはサポートが終了するとのこと…。
今後Sassを使うのはDart Sassで書けとのことですが、問題はコンパイル事情。
VisualStudioCodeのプラグインでいい感じにコンパイルしてくれるやつがないので、gulpとかwebpackとか使う必要があります。

そこで、今回はDart Sassでコーディングできるgulpファイルをつくったので、そのまとめ記事を書いていきますー！

Dart Sass × FLOCSSのgulpセットをつくってみた

Sassの書き方の主流であるDart Sass。
CSS設計の主流であるFLOCSS。

FLOCSSのCSS設計で、Dart Sassのコーディングができるgulpファイルのスターターキット的なものをつくってみました。

GitHubは以下です。

https://github.com/traveler20/gulp-starter

ざっくり言うと、Node.jsとnpmの入ったパソコンで、npm install を打って npx gulp を打ったら使えるようになります。

技術的な構成

構成としては、以下のようなディレクトリになっています。

docs
 │ index.html
 │
 └─asset
    ├─css
    ├─img
    └─js
src
 │ index.ejs
 │  └─_component
 │      _head.ejs
 │      _header.ejs
 │      _footer.ejs
 │
 └─asset
    ├─img
    ├─js
    └─sass
       │ style.scss
       │
       ├─foundation
       │   _base.scss
       │   _reset.scss
       │   _system.scss
       │
       ├─layout
       │   _footer.scss
       │   _header.scss
       │
       └─object
          ├─component
          │   _loading.scss
          │   _section.scss
          │
          ├─project
          │   _contact.scss
          │
          └─utility
              _display.scss

src内でコーディングしてdocsにコンパイルしたファイルを出力させる構成にしています。

gulpの機能

gulpfileに書いている機能としては大体以下の5つの機能。

  • Dart Sass のコンパイル
  • CSS の縮小化
  • EJS のコンパイル
  • EJSコンパイル後のHTML整形
  • JavaScript の縮小化
  • ローカルサーバーの立ち上げ
  • 作業ファイルの監視（自動更新）

この機能便利だよ！というのがあればディスカッション等で言ってもらえると幸いです。

ファイル構成

各ファイルの役割についてざっくり紹介します。
多分、一般的なgulpファイルと同じような役割かと思います。

gulpfile.js

上述した gulp の機能を記載しているファイルです。

docs

コンパイル後の HTML や CSS（納品・デプロイするフォルダ）

github pages の公開ディレクトリで docs を選択すると通常通り公開することも可能です。

src

コーディング用の EJS や SCSS ファイル。一応、HTMLでコーディングしてもコンパイルされます。

git cloneをしたらほとんどここしか触らないかなと思います。ゴリゴリコーディングしていくフォルダですね。

src/index.ejs

EJSファイル。ほぼHTMLです。HTMLのなかでJavaScriptとかPHPっぽい機能が使えて便利なので搭載しました。
普通にindex.htmlでコーディングしても普通にそのままHTMLに変換されるので、EJSに不慣れな方はHTMLでコーディングすることもできます。

src/asset/sass

Sass のコーディングファイル。CSS 設計は FLOCSS を採用しています。

Sass 自体は Dart Sass でコーディングして、sass フォルダ直下の style.scss ですべての Sass ファイルを@useしています。

Sass の構成一覧は以下のような感じです。

sass
│ style.scss
│
├─foundation
│   _base.scss
│   _reset.scss
│   _system.scss
│
├─layout
│   _footer.scss
│   _header.scss
│
└─object
    ├─component
    │   _loading.scss
    │   _section.scss
    │
    ├─project
    │   _contact.scss
    │
    └─utility
        _display.scss

使い方

前提条件

前提として node.js と npm がインストールされているものとします。

実際に使う流れ

前提条件が整っていれば、以下のような流れで進めます。

  1. git clone https://github.com/traveler20/gulp-starter.git を実行
  2. コーディングしたいファイルに cd コマンドで移動。
  3. npm install を実行
  4. npx gulp を実行
  5. src 内でコーディング
  6. docs 内のファイルを納品・デプロイ

まずは、gitをcloneします。

git clone https://github.com/traveler20/gulp-starter.git

ファイルが生成されるので、cdで移動して、npm install で node_module など必要なファイルをインストールしましょう。

cd gulp-starter

npm install

そのまま、 npx gulp を実行すれば、Dart Sassがコンパイルされ「コンパイルが成功されました」と表記されて、http://localhost:3000/が自動的にローカルサーバーが立ち上がるかと思います。

npx gulp

そのままコーディングしたら随時反映されるようになるので、src でコーディングしていきましょう。

コーディングが終われば、docs ファイルに必要なHTML,CSS,JavaScript,画像ファイルが出来上がっているかと思うので、こちらを納品、もしくはデプロイしていけばOKです。

GitHub Pagesの場合、デプロイする場所を docs を選択すればそのまま公開できます。

docsを選択

最後に

https://github.com/traveler20/gulp-starter

しばらくSassのコーディングをする際は、この構成でWEBサイトのコーディングをしていこうかなと思います。

もっとこういうやり方がいいよ！というのがあればお気軽にディスカッションでのコメントを待ってますー！

それでは。

Discussion