WATASHI

sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。

Stylusの環境構築方法はこちらの記事

実際に追加するコード

mq(num)
  breakpoints = {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  }

  for key, val in breakpoints
    if (num == key)
      num = val

  @media only screen and (min-width unit(num, px))
    {block}

• breakpointsの値はTwitterBootstrapと同じにしていますがプロジェクト別に設定しても問題ありません。
• モバイルファーストで設定しています。
• breakpointsの他にmq(num)のnumに数字を設定すればその値はメディアクエリの切り替えポイントになります。

使い方

実際には引数に数字か文字列を入力します

.hoge
  mq(sm)
    background-color: gold

これでメディアクエリの設定が楽になりました。

webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。

そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。

今までの流れは下記記事に書いてあります。

• npm + Nunjucks + Stylus で静的サイト制作を効率的にする
• ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)
• 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)
• webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)

Babelというものを使用します。

[Babel] Javascript用のコンパイラです。新しい書き方のjsコードを古い書き方のコードに変換することができます。

Babel公式サイト

webpackでjsファイルをバンドルする際にこのbabelを稼働させて古い書き方のコードに変換するという流れです。

必要なもの

• webpack
• babel-loader
• @babel/core
• @babel/preset-env
• babel.config.json
• webpack.config.jsの更新

▼各アイテムについて
[babel-loader] webpackでbabelを呼び出すために使用します
[@babel/core] coreという言葉からわかるようにbabel本体です
[@babel/preset-env] babelにはたくさんのプラグインがあり、一つずつインストールすると大変なので関連するプラグインを良い感じに使用してくれるbabel用プラグインです
[babel.config.json] babelの設定ファイルです

各ツールのインストールと設定

npmでツールをインストールしていきます

npm i -D webpack babel-loader @babel/core @babel/preset-env

インストールが終わったらwebpack.config.jsを変更します

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: 'script.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  },
  target: ['web']
}

↑これは

1. test: /.m?js$/ ⇒.jsか.mjs（moduleに対応できる新しいjsの拡張子）という拡張子のファイルを対象にして
2. exclude: /node_modules/ ⇒ node_modulesフォルダは除外して
3. use以下 ⇒ bable-loaderをオプションにpreset-envプラグインを使用して処理を行って

という設定になります。

webpack.config.jsの設定が終わったらbabel.config.jsonを作成します

touch babel.config.json

babel.config.jsonには以下の設定を行います

{
  "presets": ["@babel/preset-env"]
}

ここまで来たら今回の処理は終了です。
以前に作成していた下記コマンドを実行してbabelで変換されたjsファイルができているか確認してください

npm build:js

IE11のサポート終了にともないこれからは古いjsコードに対応しなくてもよくなりましたがReactを使用するプロジェクトなどはBabelを活用しなければいけないのでwebpackとbabelはまだまだ手放せません。

今までの流れは下記記事に書いてあります。

• npm + Nunjucks + Stylus で静的サイト制作を効率的にする
• ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)
• 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)
• webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)

npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。

ただ画像ファイルの処理がないのでその処理を追加していきます。

画像ファイル処理については大体２つのルートを考えます。

1. 画像は画像ソフトでひとつひとつ適切に圧縮する
2. 画像は一括で圧縮してサイズを小さくする

画像をただコピーするパターン

１）の場合はコピーだけで済ませるだけで十分かと思っています。
その時は以下のコードをpakage.jsonに追加します

"build:img": "cpx \"src/img/**/*.{gif,png,jpg,svg,webp}\" dist/img/",
"watch:img": "chokidar \"src/img/**/.{gif,png,jpg,svg,webp}\" -c \"npm run build:img\""

これでsrc/imgディレクトリに保存されている画像ファイルをdist/imgディレクトリに吐き出せます。

２行目の処理でフォルダの変更を感知して生成を行っています。

すでに設定されているbuildコマンドを以下のように変更します。

▼変更前

"build": "run-s build:html build:stylus build:js"

▼変更後

"build": "run-s build:html build:img build:stylus build:js"

画像を圧縮するパターン

２）のパターンはimageminパッケージを使用して圧縮します。

画像の量が大量で写真のクオリティが最重要ではない場合はこちらの方が現実的です。

２ー１）必要なパッケージをインストールします。

npm i -D imagemin imagemin-keep-folder imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo

パッケージについて

[imagemin-keep-folder]フォルダ構成を保持したまま処理できます
[imagemin-mozjpeg]jpgファイルを圧縮します
[imagemin-pngquant]pngファイルを圧縮します
[imagemin-gifsicle]gifファイルを圧縮します
[imagemin-svgo]svgファイルを圧縮します

imagemin処理はimagemin.jsファイルを作成して処理を記述しておきnpm-scriptで呼び出すようにします。

imagemin.jsファイルは以下のようになります。

const imagemin = require('imagemin-keep-folder');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');

imagemin(['src/img/**/*.{gif,png,jpg,svg}'], {
  plugins: [
    imageminMozjpeg({ quality: 80 }),
    imageminPngquant({ quality: [0.7, 0.8] }),
    imageminGifsicle(),
    imageminSvgo()
  ],
  replaceOutputDir: output => {
    return output.replace(/img\//, './dist/img/')
  }
}).then(() => {
  console.log('圧縮完了');
});

imagemin.jsができたのでnpm-scriptに以下の処理を追加します。

"build:img": "node imagemin.js"

これで画像圧縮を自動化できました。

新しい画像フォーマットのwebpの使用も今後考えなければいけません。

その際は別の処理を追加しますがスケジュール的に余裕があればよいですが画像の差し替えなどはだいたいギリギリのタイミングだったり余裕のないときに処理が発生することが多いのでまだまだjpgフォーマットでの処理は続くと思っています。

npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。

前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。

今回はファイル更新を感知して自動更新されるように設定します。

watchコマンドを設定する

前回同様package.jsonのscriptの項目内にファイル更新感知（watch）コマンドを用意します。

"watch:html": "chokidar \"src/**/*.njk\" -c \"npm run build\"" 

↑srcディレクトリ内の拡張子njkのファイルが更新されたらnpm run build:htmlコマンドを発動します

"watch:stylus": "stylus -w src/stylus/style.styl -o dist/css/style.css"

↑stylusコマンドにwatchオプションをつけてstyle.stylファイルをdist/css/style.cssにコンパイルします

"watch:js": "chokidar \"src/**/*.js\" -c \"npm run build:js\""

↑src内のjsファイルに変更があればnpm run build:jsを実行します

"watch": "run-p watch:*"

↑watch:html,watch:stylus,watch:jsを並列で処理します。

これで各ファイルの変更を感知して変更があれば関連するタスクを発動します。

browser-syncを設定して更新確認を簡単にする

修正の確認はdistフォルダ内のhtmlファイルをブラウザで表示すれば確認できます。

しかし、これだとファイルを更新したときにブラウザを都度更新しなければいけません。

ファイル更新後、自動で変更が反映されページもリロードされるbrowserSyncを導入します。

npx browser-sync init

↑このコマンドでbs-config.jsという設定ファイルが生成されます

bs-configを調整して引き続きnpm-scriptsの方に記入します。

"server": "browser-sync start --config bs-config.js"

このserverコマンドをさきほど作成したwatchコマンドに追加します。

"watch": "run-p watch:* server"

↓ファイル更新感知タスクができたので開発用コマンドをまとめます

"dev": "run-s clean build watch"

直列処理で①distフォルダを一旦削除②html,css,jsを再構築③ファイル変更を感知状態にしています。

これでファイル更新を感知しbrowser-syncで立ち上がった仮サーバーで更新内容をブラウザの更新ボタンを押さずに確認できるようになりました。

画像まわりの処理が抜けているので次回設定します。

次回に続く