技術と雑記ブログ

    GulpでSassをコンパイル時にcssをインラインでhtmlに自動で挿入する方法【cssインライン化】

    最近はページスピードを上げるためにcssをhtml内にインラインで記述するサイトが増えてきましたね。 僕も実際の案件でPageSpeed Insightsの点数を上げる施策をしました。

    その方法の一つとしてcssのインライン化です。

    インライン化といっても.cssファイルの中をhtmlのstyleタグの中に毎回コピペしていてはすごーく大変ですよね？ 今回はGulpを使用し自動でインライン化する方法をご紹介します！

    ポイント

    • cssをHTML内に自動でインライン化
    • cssの中をコピペで貼り付けしない

    目次

    GulpでSassをコンパイル時にcssをインラインでhtmlに自動で挿入する方法

    Sassを使用しますのでコンパイル方法については以下の記事をご確認ください。
    gulpでSassを自動コンパイルする方法

    今回のインライン化の流れ

    1. Sassをコンパイルしてcssを出力
    2. 1のcssをsrc/inline_templates/css.htmlに挿入
    3. 2をassets/incに出力
    4. 3の出力されたcss.htmlをindex.phpにインクルード

    ディレクトリ構成

    .
├── assets
│   ├── css
│   │   └── style.css
│   └── inc
├── gulpfile.js
├── index.php
├── package.json
└── src
    ├── inline_templates
    │   └── css.html
    └── sass
        └── style.scss

    特定ファイルの中を別ファイルに挿入できるパッケージ gulp-file-include

    gulp-file-includeをコマンドラインからインストールします。

    npm install gulp-file-include -D

    今回はSassもコンパイルしますので以下もインストール。

    npm install gulp-sass gulp-plumber gulp-file-include -D

    gulpfile.jsにタスクを記述

    var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var fileInclude = require('gulp-file-include');

//Sassコンパイルタスク
gulp.task('sass', function(){
  gulp.src('src/sass/*scss')//scssファイルのディレクトリを指定
    .pipe(plumber())//エラーが起きても監視を続行
    .pipe(sass({outputStyle: 'compressed'}))//圧縮:compressed 未圧縮:expanded
    .pipe(gulp.dest('assets/css/'));//指定のディレクトリにcssを出力
});

//コンパイルしたcssをインラインで挿入するタスク
gulp.task('include', function() {
    gulp.src("src/inline_templates/css.html")//cssを挿入するファイルを指定
    .pipe(fileInclude())
    .pipe(gulp.dest('assets/inc'));//指定のディレクトリにインラインcssを挿入したファイルを出力
});

//監視タスク
gulp.task("watch", function() {
    gulp.watch("src/sass/**/*scss",["sass"]);//sassタスクを監視
    gulp.watch("assets/css/**/*css",["include"]);//includeタスクを監視
});

gulp.task('default', ['watch']);//デフォルトで監視タスクを実行

    今回のメインはincludeタスクです。
    src/inline_templates/css.htmlにcssを挿入してassets/incに出力するというタスクです。

    cssをインラインで挿入したい場所を指定する。

    挿入したい場所を以下のように記述します。

    <style>
  @@include('../../assets/css/style.css')
</style>

    @@include()の()の中に挿入したいファイルのパスを記述します。
    パスの指定方法は相対パスです。
    ここでは../../assets/css/style.cssを指定しています。

    これで準備完了なので実行しよう！

    ここまで来るとほぼ終わりなのでgulpを実行しましょう！

    gulp

    これで監視状態になるのでSass(scss)ファイルを変更すると自動でassets/incにインライン化されたhtmlファイル(css.html)が出力されていると思います。

    出力されたhtml使用するページにインクルード

    インライン化されたファイルが生成されたのであとは使用したいページにインクルードするだけです。

    ※インクルード方法は環境によって違います。

    ここではphpのincludeを使用します。
    以下のように記述してインクルード。

    <!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="utf-8">

        <title></title>

        <?php include($_SERVER["DOCUMENT_ROOT"] . "/assets/inc/css.html"); ?>

    </head>
    <body>

    </body>
</html>

    wordpressの場合はget_template_partを使用したりheader.phpでインクルードしたりするのがいいのではないでしょうか

    まとめ

    記事の冒頭でも述べましたが、インライン化する理由はページ読み込みの高速化です。

    この記事の例ではSassのコンパイル込みになってしまし少々複雑になってしまいましたが、やっていることはファイルの挿入だけですので他にもいろいろ使いみちがあると思います。
    JavaScriptのインライン化にも使用できます。