PostCSSを導入してホームページの複数CSSの統合と、minimize化を自動処理する方法-MYNT Blog

minimize化というと、一昔前はJavascriptのイメージでしたが、昨今のStyleSheet(css)はかなり構造的な構成が持てるようになったので、容量もさることながら、ファイル数も爆増えしてしまう傾向があります。少しの記述でも10ファイル程あれば、httpプロトコルの、ヘッダパケットが1ファイルの10倍かかってしまいます。著名なJS系（Node系）フレームワークを使っていれば、WebPackを導入すればいいだけなんですが、オレオレフレームワークの場合はどうすればいいんでしょう？ということで、WebPackの中でも使われている、"PostCSS"という便利なライブラリを使うことで、minimize化、@importの集約化ができるという構造に変更したことで、ページの読み込み速度を爆速にした顛末を備忘録しておきます。

PostCSSってなんぞや？

モジュールサイトホームページ構造で、以下のような王道構造の場合

index.html ├ js/ │ ├ main.js │ └ view.js ├ css/ │ ├ style.css │ ├ main.css │ ├ header.css │ ├ footer.css │ └ common.css └ img/

この場合、cssファイルが5ファイル読み込まれますが、これをpostcssを使って、style.min.cssという、結合の1ファイルを作って、それのみを読み込むことで、無駄なhttpパケットがなくなり、さらにminimize化することで、全体容量の削減にもなり、結果的に、ページ読み込みが早くなるといういいことずくめの状態が作れるライブラリです。他にも、ベンダープレフィックスの自動追加や、cssの記述ミスの検知などの機能もありますが、とりあえず、統合とminimize化が自動でできるようになれば、開発効率も、公開後のページクオリティも向上することができるので、今回はこの開発環境構築をしてみたいと思います。

独自フレームワークに最適

react.jsやnext.jsには、webpackライブラリを簡単に導入することができ、postcssはその中に含まれているので、そうした王道フレームワークを使っている人は、設定は不要ですが、 Wordpressや、独自のフレームワークなどでWeb制作をしている人には、非常に便利な環境構築になります。この環境は、開発環境のみのセットなので、本番には安定してデプロイできるようになるので、おすすめの環境構築です。ちなみに、dockerを使ってローカルで開発（Web制作）作業を行なっている人に向けての環境構築になるので、さらに独自の環境の場合は、node環境を整えてpostcssを導入して構築してみてください。

開発環境と本番環境の設定

docker構築

以下のファイル構造で、Nginx + PHP + node の環境を構築します。

docker ├ compose.yaml ├ public_html/ ├ nginx/ │ ├ Dockerfile │ └ default.conf ├ php/ │ ├ Dockerfile │ └ entrypoint.sh └ node/ ├ Dockerfile └ postcss ├ watch.sh └ postcss.config.js

compose.yaml

services:
  php:
    container_name : php
    build : ./php
    volumes:
      - ./public_html:/var/www/html
    working_dir: /var/www/html
    
  nginx:
    container_name: nginx
    build : ./nginx
    ports:
      - 8888:80
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./public_html:/var/www/html
    depends_on:
      - php

  node:
    container_name : node
    build: ./node
    tty : true
    volumes :
      - ./public_html:/app
      - ./node/postcss/postcss.config.js:/postcss/postcss.config.js
      - ./node/postcss/watch.sh:/postcss/watch.sh
    command: /postcss/watch.sh

nginx/Dockerfile FROM nginx:1.19.5-alpine nginx/default.conf

server {
  listen 80;
  server_name localhost;
  index index.php index.html;
  root /var/www/html;
  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass php:9000;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}

php/Dockerfile

FROM php:8.1-fpm-alpine

RUN apk update && \
  apk add --update --no-cache \
  libjpeg-turbo-dev \
  libwebp-dev \
  libpng-dev

RUN docker-php-ext-configure gd --with-jpeg
RUN docker-php-ext-install -j$(nproc) gd

RUN apk update && \
  apk add -u busybox && \
  apk add --update --no-cache \
  syslog-ng \
  cyrus-sasl \
  postfix \
  vim

COPY main.cf /etc/postfix/
COPY sasl_passwd /etc/postfix/
RUN /usr/sbin/postmap /etc/postfix/sasl_passwd

COPY entrypoint.sh /
ENTRYPOINT ["sh", "/entrypoint.sh"]

php/entrypoint.sh

#!/bin/ash

postfix start

# dockerのイメージが、entrypointによって上書きされたので、再実行してやる
. /usr/local/bin/docker-php-entrypoint php-fpm

node/Dockerfile

FROM node:20

RUN mkdir -p /app
RUN mkdir -p /postcss

WORKDIR /postcss
RUN npm init -y
RUN npm install postcss postcss-cli postcss-import cssnano autoprefixer

node/postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
    require("autoprefixer"),
    require("cssnano")({
      preset: "default",
    }),
  ],
};

node/watch.sh

#!/bin/sh
set -u
npx postcss "/app/postcss/**/style.css" \
  --base /app/postcss/ \
  --dir /app/postcss/ \
  --ext .min.css \
  --watch \
  --config /postcss \
  --ignore "**/*.bak/**"

Githubで公開

自分の公開しているGithubのdockerリポジトリで、postcssというブランチを作って更新しておいたので、cloneしてお好きにお使いください。 https://github.com/yugeta/docker/tree/postcss ちなみに、MITなので、fork、独自改良、なんでも大丈夫だし、プルリクも受け付けます。

開発ルール

今回の開発環境は、dockerフォルダの中の "public_html" の中でプロジェクト（gitリポジトリなど）を構築してください。（シンボリックリンクやエイリアスなどで、別フォルダをリンクしてもらっても大丈夫です）その中のstuyle.cssが全てstyle.min.cssに変換されます。基本的に、style.cssファイルのみを、@importの起点として、ファイル統合して、minimizeすして、style.min.cssファイルを構築するようにしています。 htmlファイル内の linkタグを以下のようにしてください。 <link rel="stylesheet" href="css/style.min.css" /> これで、どのファイルを更新しても、自動的にstyle.min.cssが更新されるようになっています。便利ですね〜。

NGパターンと注意点

style.css内で、同じファイルのstyle.cssを読み込むと、無限ループが発生するので、こうしたロジックが破綻する構造は避けてください。 css内でurlを使う場合は、相対パスで記述するようにしてください。 url(/content/about/css/sample.css) のようにdocument_rootでの記述は、正常にコンバートされない可能性があります。

手動minimize化

style.css以外のcssファイルを直接コンバートしたい場合は、dockerのnodeコンテナ内のターミナルで以下のコマンドを実行してください。 npx postcss 変換元ファイルの名（パス） -o 変換後のファイル名（パス）

あとがき

webページは、読み込み速度が命と言っても過言ではありません。読み込みファイル数とファイルサイズを小さくすることは、ページクオリティの向上に大きくつながります。また、読み込み速度が安定すると、ページ離脱も軽減されるはずなので、ビジネスサイトなどであれば、必須の環境構築と言ってもいいですね。ちゃんと、Git,Dockerなどを使ってWeb開発をしている人であれば、チーム開発でも今回の環境を便利に使ってもらえると思います。また一段上のレベルに持っていけますね。

PostCSSを導入してホームページの複数CSSの統合と、minimize化を自動処理する方法

PostCSSってなんぞや？

独自フレームワークに最適

開発環境と本番環境の設定

docker構築

Githubで公開

開発ルール

NGパターンと注意点

手動minimize化

あとがき

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログアーカイブ

ラベル

PostCSSを導入してホームページの複数CSSの統合と、minimize化を自動処理する方法

PostCSSってなんぞや？

独自フレームワークに最適

開発環境と本番環境の設定

docker構築

Githubで公開

開発ルール

NGパターンと注意点

手動minimize化

あとがき

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログ アーカイブ

ラベル

ブログアーカイブ