Jamstackな感じで構築するのに使える静的サイトジェネレーターの11ty(Eleventy)で、Sassをいい感じに扱うためにGulpを使って、新規でコーディングを始めるのに良さようなやつを作ってみました。
なんか日本語変だけど気にせず行きます！
ざっくり11ty(Eleventy)とは
とてもシンプルなSSG（静的サイトジェネレーター）です。
ボクは使ったことがないのでよく分かりませんが、Jekyll にも似た感じらしいです。
11ty(Eleventy)は、多くのテンプレート形式に対応しているのも特徴です。
- HTML
*.html - Markdown
*.md - JavaScript
*.11ty.js - Liquid
*.liquid - Nunjucks
*.njk - Handlebars
*.hbs - Mustache
*.mustache - EJS
*.ejs - Haml
*.haml - Pug
*.pug
辺りに対応しており、公式ではNunjucks推しなのか、ドキュメントはNunjucksで書いてあります。
Nunjucksはあまり有名な印象は無いんだけど、mozillaが開発してるようです。
記法としては、EJSに似ててHTMLベースなので、パッと見も分かりやすく良さげです。
普段はPugを使うことが多いのですが、11ty(Eleventy)を触るに当たってはNunjucksを使うことにしました。
そのため、今回紹介するスターターもNunjucksを使っています。
で、この11ty(Eleventy)はシンプルが故に、CSSとかJSとかに関しては何もしてくれません。
もちろんCSSファイルの読み込みとかインラインで埋め込んだりは出来ますが、Sassを使ったりAutoprefixerでベンダープレフィックスを付けるとかが出来ません。
しかし、実際にサイトをコーディングする際には、やはり一番慣れているSass（scss形式）で書けないと辛いなぁと思い、色々調べていたのですが、イマイチいい感じのが見つからなかったので、四苦八苦しながら自分が使いやすい感じのを作ってみました。
一応非公式のプラグインでSassが使えるようになるやつも有るんですが、Globやら色々やりたいってなった時によくわからないので、Gulpなら好きにやりやすいと思い、11ty(Eleventy)＋Gulpな感じにしました。
11ty(Eleventy)＋Gulp＋Sassな感じのスターター
と言う事で、11ty(Eleventy)とGulpでSassのコンパイルをしてくれる新規でコーディングを始めるのに使えそうなやつはGitHubに上げておきました。
hirasawa/latele-11ty-gulp-starter
ライセンス的には、CC0なのでほんと自由に使ってください。
Nodeのバージョンは特に指定してませんが、ボクの方で使ってたのは14.17.5です。軽く試した限り、11.13.0でも動きました。
使い方としては、CloneなりZipダウンロードなりして頂いて、コマンドラインで npm i してインストールしたら、後は npm start でサーバーが起動して、ブラウザにトップページが表示されます。
ブラウザシンクの設定で https: true にしてるので警告が出ると思いますが、そのまま表示してもらって大丈夫です。
嫌な人は、false にするか行ごと削除してください。
npm run build すればビルドされます。
開発中はそこまで使うことは無いと思いますが、ゴミファイルが増えちゃったりした場合とかに使えば良さげ。
通常は、ホスティングサービスを使ったりする時に指定するビルドコマンドになります。
これで出来ること
11ty(Eleventy)を使いつつSassを書いたらコンパイルしてオートリロードされる感じです。
Sassに関してはGulpを使っているので、普段Gulpを使っている方はすんなり使えると思います。
GulpでやってることはSass関係と不要ファイルの削除くらいです。
ブラウザシンクは11ty(Eleventy)標準で、後は.eleventy.jsの方で日付の処理やらHTMLの整形をやってます。
CSSやSass関係で使ってるパッケージはこんな感じです。
- autoprefixer
- cssnano
- gulp-notify
- gulp-plumber
- gulp-postcss
- gulp-sass
- gulp-sass-glob-use-forward
- mqpacker
- postcss
- sass
すごい雑に説明すると、Sassを使えるようにして、エラー表示して、エラーで止めないようにし、ベンダープレフィックス自動でつけて、globでインポートを一括で出来るようにして、メディアクエリ整理して、CSS圧縮してくれる感じです！
普段、Gulp使ってSass書いてる方なら馴染みのあるやつばかりだと思います。
後は、npm run build した際に、出力ファイルのディレクトリを一度全部削除するのと、オートリロードがうまく動かない対策でコピーしてたSassファイルを削除するために del を入れています。
今回の目的は、11ty(Eleventy)でいい感じにSassを扱うためにGulpを使うことなので、そんなに余計なのは入れてないと思いますが、この辺は必要に応じて好きに足したり減らしたりして頂ければと思います。
コレを作るのに地味に苦労したところ
今まで、Gulpを使って複数の処理を同時にしたいと思ったことがなかったので、11ty(Eleventy)の開発用サーバーを起動しつつ、Gulpを動かして連携するみたいな方法がさっぱりでした。
GitHubで色々検索して、11ty(Eleventy)とSassを使ってるやつを探して、どうやって書いてるのか調べながらやってたんですが、npm-run-allにたどり着くまでに結構な時間が掛かったような...ｗ
このnpm-run-allは、複数のnpm-scriptsを実行できるやつで、これを入れておけば、"run-p start:{gulp,eleventy}", みたいに書くことでGulpと11ty(Eleventy)が同時に実行できます。
で、これでバッチリかなーって思ったらなんかオートリロードがうまく動かないので、その対策とかに苦労してました。
と言う事で
11ty(Eleventy)自体がまだまだマイナーな存在で、11ty(Eleventy)とGulpを使ってSassを書きたい！みたいな情報が殆ど見つからず苦労したので、これから始める人が少しでも楽できたら良いなって事で11ty(Eleventy)＋Gulp＋Sassな感じのスターター公開してみました。
hirasawa/latele-11ty-gulp-starter
個人的に、11ty(Eleventy)はとっつきやすくていい感じだったので、もっと普及して欲しいと言う願いも込めて。
...ここまで書いて、仮にもスターターとか言ってるのに、肝心の中身の部分（NunjucksやらSass）の説明が無いことに気付いてしまった！
日付の処理だとかページ分割、パンくずリストとかもサンプル的に入れてたり、SassはFLOCSSベースだったりするので、コーポレートサイトとかならわりと使えそうな感じにはなってるんですが、その辺りの説明は次回にでも書こうと思います。