middleman(4.2.1) + webpack(3.10.0)でモダンな静的サイトのテンプレートを作る

この記事は5分で読めます。

以前、middleman+gulpで静的サイトのテンプレート的な物を作ってみるという記事を書いた事がありますが、あれからもう2−3年。最近webpackを勉強している事もあり、もうgulpを使わなくなりました。

middleman + gulpは設定ファイルやファイル動作がなかなか複雑だったし、webpackを使った方が設定が分かりやすいので、middleman + webpackな最新の静的サイトテンプレートを作ってみます。

ちなみに今回作ったものはこちらのリポジトリにpushしておきました。

t4traw/middleman-webpack-sample

📎 今回使ったもの(ver)

🌱 事前準備

今回はwebpackを使うので、nodejsが必要です。また僕はyarnを使用したので、yarnもインストールが必要です。Mac環境の方はbrewからサクっとインストールしてください。

$ brew intall node
$ brew intall yarn

🔧 まずはmiddlemanとwebpackをインストール

まずはGemfileをサクっと準備。

$ mkdir YOUR_SITE_NAME && cd $_
$ bundle init

Gemfileの中にmiddlemanを書き込みます。

Gemfile
gem "middleman"

そしてbundle installします。

$ bundle install

middlemanがインストールできたら、middleman newします。

$ middleman new .

この段階で.gitignoreが生成されますが、node_modulesなどのファイルが入っていないので、サクっと.gitignoreを生成しなおします。

$ rm -f .gitignore && curl https://www.gitignore.io/api/node%2Csass%2Cruby%2Cmacos%2Cgrunt > .gitignore

webpackを使うためにpackage.jsonを用意します。yarn initする時にいくつか質問がありますが、とりあえず全部Enterで大丈夫だと思います。必要があれば変えてください。

$ yarn init

package.jsonができた事を確認したら、必要なnpmパッケージをインストールしていきます。まずは本命webpackちゃん。そして必ず必要になるwebpack.config.jsを生成しておきます。

$ yarn add webpack --dev
$ touch webpack.config.js

この段階でまずはmiddlemanのexternal_pipeline(外部パイプライン)でwebpackが動くか確認してみます。

config.rb
activate :relative_assets
set :relative_links, true

activate :external_pipeline, {
  name: :webpack,
  command: build? ?
    "NODE_ENV=production yarn run build" :
    "NODE_ENV=develop yarn run develop",
  source: ".tmp/dist",
  latency: 1
}
package.json
{
  "name": "middleman-webpack-sample",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "ssh://git@github.com/t4traw/middleman-webpack-sample.git",
  "author": "Tatsuro Moriyama <t4traw@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "scripts": {
    "develop": "webpack --config ./webpack.config.js --watch -d --progress --colors",
    "build": "webpack --config ./webpack.config.js --bail -p"
  }
}
webpack.config.json
const webpack = require('webpack');
module.exports = {
  entry: [
    './source/javascripts/site.js'
  ],
  output: {
    path: __dirname + '/.tmp/dist',
    filename: 'javascripts/bundle.js'
  }
};

各設定ファイルを上記のようにし、とりあえずmiddlemanを起動してみます。

$ middleman

↓みたいな感じで表示されればひとまず成功です。

== The Middleman is loading
== Executing: `NODE_ENV=develop yarn run develop`
== View your site at "//localhost:4567", "//127.0.0.1:4567"
== Inspect your site configuration at "//localhost:4567/__middleman", "//127.0.0.1:4567/__middleman"
== External: yarn run v1.3.2
== External: $ webpack --config ./webpack.config.js --watch -d --progress --colors
 10% building modules 1/1 modules 0 active== External: Webpack is watching the files…
== External: Hash: 56b513b6e7776f8a5874
== External: Version: webpack 3.10.0
== External: Time: 106ms
== External:                 Asset     Size  Chunks             Chunk Names
== External: javascripts/bundle.js  3.57 kB       0  [emitted]  main
== External:    [0] multi ./source/javascripts/site.js 28 bytes {0} [built]
== External:    [1] ./source/javascripts/site.js 32 bytes {0} [built]

起動の確認ができたので、あとはjavascriptの読み込みをlayoutに書きます。

source/layouts/layout.erb
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Use the title from a page's frontmatter if it has one -->
    <title><%= current_page.data.title || "Middleman" %></title>
    <%= stylesheet_link_tag "site" %>
    <%= javascript_include_tag "site" %>
  </head>
  <body>
    <%= yield %>
  </body>
  <%= javascript_include_tag :bundle %>
</html>

ここまで下準備。webpack.config.jsonのoutputに書きましたが、filename: 'javascripts/bundle.js'としているので、bundle.jsを読み込めば全てのcss(sass)とjavascriptが読み込まれるようにしていきます。

🚘 webpackでcssをいい感じにする

javascriptでcssを読み込んで描画

まず、javascriptでcssを読み込むようにします。読み込んで、<head>の一番下に書き込むようにします。最初はこの方法どうなのかなぁ?と思っていましたが、httpリクエスト少ない方が良いし、最近だとhtmlとかも読み込んだりする世界になってきたので、もうcssはjsで書き込む事にしました。

というわけで、まずはyarnで必要なパッケージを追加します。

$ yarn add style-loader css-loader --dev

webpack.config.jsonにsassもしくはscssをstyle-loader css-loaderを使うように設定を追加します。

webpack.config.json
const webpack = require('webpack');
module.exports = {
  entry: [
    './source/javascripts/site.js'
  ],
  output: {
    path: __dirname + '/.tmp/dist',
    filename: 'javascripts/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
        ]
      },
    ]
  }
};

次にsite.jsでcssを読み込んでみます。デフォルトだとsite.css.scssになってるんで、一時的に.scssを消しておいてください。

source/javascripts/site.js
import '../stylesheets/site.css';

実際に読み込めてるか分かるように適当に背景色などを変えて、DOMインスペクターで見てみます。

いい感じです。

sassコンパイル

cssの読み込みは無事できたので、sassのコンパイルを追加します。最近はsassも古いという風潮がありますが、僕の中ではバリバリ現役なのでsassを使います😄

$ yarn add node-sass sass-loader --dev

webpack.config.jsonに追加します。そして、対象のファイルタイプをcssからsassに変更します。もちろん実際のファイル名もsite.css.scssに戻しておいてください。

webpack.config.json
〜〜〜省略〜〜〜
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  }
source/javascripts/site.js
import '../stylesheets/site.css.scss';

これでsassのコンパイルができるようになりました。

autoprefixerとminify

最後にautoprefixerとminifyをしておきます。自分はここで「え?」と躓きました😭

とりあえず必要なパッケージをインストールします。

$ yarn add postcss-loader autoprefixer csswring --dev

まずは、webpack.config.jsonにpostcss-loaderを追加します。

webpack.config.json
〜〜〜省略〜〜〜
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      },
    ]
  }

次にpostcss.config.jsなるものをstylesheetsの中に追加します。ググるとwebpack.config.jsonにプラグインの設定かけば動くよと見かけますが、自分の環境では動かなかったのです。

$ touch source/stylesheets/postcss.config.js
source/stylesheets/postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions']
    }),
    require('csswring')(),
  ],
};

テストでsource/stylesheets/site.css.scssにdisplay: flex;を追加してみてみます。

source/stylesheets/site.css.scss
.foo {
  display: flex;
}

無事minifyとベンダープレフィックスが追加されています👏

🎉 StaticSiteBootstrapを更新しておきました。

今回のmiddleman + webpackをStaticSiteBootstrapに反映させておきました。といっても今回の内容そのままですが。

こうしてGitHubにpushしておけば、

$ middleman init -T t4traw/static_site_bootstrap

あとはいくつかのコマンドで簡単にテンプレートから生成する事ができます。よく静的サイトを制作する方はこんな具合でサクっとベースを作れると楽に走り出せるのでオススメです🏃

t4traw

いつか学んだ知識や技術で人の役にたつ事を目標に日々勉強しています。音楽とウイスキーとRubyが好きです。最近はキャンプと釣り(ライトソルトルアー)も好きです。

コメントください🙋

わかりにくい所や、共感していただける事がありましたら、お気軽にコメントください✋ ブログのコメントでもTwitterなど、どこでも反応します👍

comments powered by Disqus
rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora