ver4以降のMiddlemanでjqueryを使う #jQuery

最近、静的サイトを作るタスクがあったので周りも使っていたMiddlemanで作ろうと思いました。

Middleman JQueryでググったらgem 'jquery-middleman'とか出て簡単と思ってました。
ただ、現実は違いました。

公式サイトより
https://middlemanapp.com/jp/advanced/external-pipeline/

私たちはフロントエンド言語とツールの爆発的増加のただ中にいます。開発が始まって以来, Middleman はフロントエンドの依存関係の管理とコンパイルに対するソリューションとして Rails のアセットパイプライン機能を備えていました。

ここ数年で, コミュニティは Rails から離れ NPM のタスクランナー (gulp, Grunt) や依存管理 (Browserify, webpack), 公式ツール (EmberCLI, React Native) やトランスパイラ(ClojureScript, Elm) に焦点を合わせるようになりました。

依存管理に関しては、脱Railsと言うことか。。。
（後述しますが、無理やり使うgemがあります。）

環境

middleman 4.2.1
npm 5.0.0
node 8.0.0

JQueryをWebpack経由で入れる。

本題です。公式でも紹介されている通りwebpackを用いてJQueryを入れてみます。
~~JQueryくらいファイルぶちこめばいいじゃん~~

ここからの作業は全て、middlemanのルートディレクトリで行っています。

1. 今回使いjsのパッケージをnpm経由でダウンロードする。

package.json

{
  "name": "my_packages",
  "version": "0.0.0",
  "description": "",
  "author": "RyujiKawazoe",
  "dependencies": {
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "webpack": "^2.6.1"
  }
}

下記のコマンドを実行する。

npm install

そうすると、jqueryとwebpackがnode_modulesというディレクトリの中にインストールされます。

2. webpackの設定ファイルを用意

webpackはwebpack.config.jsというファイルをデフォルト設定ファイルとしてみているらしいです。

webpack.config.js

module.exports = {
    entry: {
        site: './source/javascripts/site.js'
    },
    output: {
        path: __dirname + '/.tmp/dist',
        filename: 'javascripts/[name].js'
    }
};

これは、./source/javascripts/site.jsでの記述内容を.tmp/dist/javascripts/site.jsに書き出すという意味になります。

3. site.jsにjqueryをロードするコードを書く。

先ほどの./source/javascripts/site.jsに書く内容です。

site.js

var $ = require('jquery');
alert($.fn.jquery);

4. webpackの挙動の確認

./node_modules/webpack/bin/webpack.js --bail

上記のコマンドを打つと

.tmp/dist/javascripts/site.jsが出来上がっていると思います。
中を見てみるとJqueryのコードがありますね。

5. config.rbで外部パイプラインを使って、build/以下に配置する

middleman 4.xから追加されたexternal_pipelineを使って、配置を行う

config.rbに下記の行を追加

config.rb

activate :external_pipeline,
         name: :webpack,
         command: build? ? './node_modules/webpack/bin/webpack.js --bail' : './node_modules/webpack/bin/webpack.js --watch -d',
         source: ".tmp/dist",
         latency: 1

おなじみの下記のコマンドを叩くと、build/javascrpitsいかにjQueryが展開される

middleman build

【無理やり編】3.xで使ってたsprocketsを使う

webpackに行き着くまでに一度試したくらいの内容なので、正しい情報じゃない可能性があります。
https://github.com/middleman/middleman-sprockets

Gemfile

gem 'middleman-sprockets'

config.rb

activate :sprockets

気をつけたほうがいいこと

npmやnodejsのバージョンは確認しましょう。webpackがエラー起きる可能性があるので。

参考にしたサイト

http://qiita.com/mm36/items/59632e6cfad208b52ad2
https://github.com/Instrument/middleman-template/tree/master/template
https://rossta.net/blog/using-webpack-with-middleman.html