Javascript 界隈の進化は早く，webpack 全盛時代から今度は parcel だと！ さっそく parcel を使ってみました。Bootstrap を使えるようにしてみました。ちょっと残念なことに，完全に parcel だけではうまくいかず，scss の変換で gulp を併用しています。
この記事は下記の2つの記事を再構成しました。
前提: Middleman と yarn の設定
Middleman で Slim を使いたいので次のように設定しました。
$ gem install middleman
$ gem install slim
$ middleman init (プロジェクト名) -T yterajima/middleman-slim
最初の Middleman インストール時に次の設定にしました。
- Asset Pipe Line をオフにしました
- Compass, LiveReload はインストールしています
- config.ru を有効にしました。Heroku などにデプロイするときに使います
また，最初から yarn にしたので，yarn をインストールした後，次のコマンドで package.json を初期化しています。
$ cd (Middlemanのディレクトリ)
$ yarn init
たくさん質問されます。良きように設定してください。
Middleman v4 で parcel を使えるようにする手順
- yarn で parcel をインストールする
- .gitignore を編集する
- config.rb で，相対パス指定にして external_pipeline の設定に parcel を追加する
1. yarn で parcel をインストールする
次のコマンドを実行します。
$ yarn global add parcel-bundler
2. .gitignore を編集する
.gitignore に次の記述を足します。
# Ignore yarn log
yarn-error.log
# Ignore node_modules
/node_modules
# Ignore dist
dist/
3. config.rb で，相対パス指定にして external_pipeline の設定に parcel を追加する
ここが本題。config.rb に次の記述を足します。
# 相対パス指定にする
activate :relative_assets
# parcel を呼び出す設定にする
activate :external_pipeline, {
name: :parcel,
command: build? ? "parcel build source/javascripts/all.js --out-dir build/javascripts/" : "parcel watch source/javascripts/all.js --out-dir build/javascripts/",
source: './build',
latency: 1
}
Middleman v4 + parcel で Bootstrap を使えるようにする手順
- yarn で gulp を追加する
- yarn で gulp-coffee と gulp-sass を追加する
- config.rb の external_pipeline の設定に parcel と gulp を追加する
- gulpfile.coffee に scss を変換する設定を追加する
- site.css.scss を site.scss にリネームする
- yarn で jQuery, bootstrap, popper.js を追加する
- site.scss の bootstrap の記述を追加する
- site.js (もしくは all.js) に bootstrap の記述を追加する
1. yarn で gulp を追加する
$ cd (Middlemanのディレクトリ)
$ yarn global add gulp
$ yarn add gulp
2. yarn で gulp-coffee と gulp-sass を追加する
$ cd (Middlemanのディレクトリ)
$ yarn add gulp-coffee gulp-sass
3. config.rb の external_pipeline の設定に parcel と gulp を追加する
config.rb の external_pipeline の設定を次のようにします。
activate :relative_assets
activate :external_pipeline, {
name: :parcel,
command: build? ? "parcel build source/javascripts/site.js --out-dir build/javascripts/" : "parcel watch source/javascripts/site.js --out-dir build/javascripts/",
source: "./build",
latency: 1
}
activate :external_pipeline, {
name: :gulp,
command: build? ? "gulp build" : 'gulp watch',
source: "./build",
latency: 1
}
好みで source/javascripts/site.js を source/javascripts/all.js にしてもいいです。
4. gulpfile.coffee に scss を変換する設定を追加する
Middleman のディレクトリに下記のような gulpfile.coffee を追加します。
gulp = require 'gulp'
sass = require 'gulp-sass'
gulp.task 'build:sass', () ->
gulp.src 'source/stylesheets/**/*.scss'
.pipe sass()
.pipe gulp.dest('build/stylesheets/')
gulp.task 'watch:sass', ['build:sass'], () ->
gulp.watch ['source/stylesheets/**/*.scss'], ['build:sass']
gulp.task 'build', ['build:sass']
gulp.task 'watch', ['watch:sass']
5. site.css.scss を site.scss にリネームする
$ cd (Middlemanのディレクトリ)
$ mv source/stylesheets/site.css.scss source/stylesheets/site.scss
6. yarn で jQuery, bootstrap, popper.js を追加する
$ cd (Middlemanのディレクトリ)
$ yarn add jquery bootstrap@4.0.0-beta.2 popper.js
7. site.scss の bootstrap の記述を追加する
source/stylesheets/site.scss の冒頭を次のようにします。
@charset "utf-8";
@import "normalize";
@import "../../node_modules/bootstrap/scss/bootstrap";
8. site.js (もしくは all.js) に bootstrap の記述を追加する
source/javascripts/site.js (もしくは all.js) に次のように記述します。
var $ = window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');
確認方法
まず，Javascript Console でエラーが出ていないことを確認しましょう。
次に source/index.html.slim に下記を追記してボタンを配置してみましょう。
.container
button type="button" class="btn btn-danger" Danger
サーバーを立ち上げます。
$ cd (Middleman のディレクトリ)
$ middleman server
http://localhost:4567 を表示した時に赤いボタンが表示されていれば成功です。
次に source/stylesheets/site.css に下記を追記してみましょう。
body {
background: orange;
}
@include media-breakpoint-up(md) {
body {
background: red;
}
}
サーバーを立ち上げます。
$ cd (Middleman のディレクトリ)
$ middleman server
PC で http://localhost:4567 を表示した時，画面を広くした時に背景が赤くなり，狭くした時に背景がオレンジになれば成功です。