GulpでCSSやJavaScriptをHTMLにインライン挿入

Gulp を使って CSS や JavaScript を直接 HTML に入れ込む方法です。

いろいろな方法がありますが、単純に「css ファイルや js ファイルをテキストとして html(php)ファイルに挿入する」という方法で実現します。

GulpでCSSやJavaScriptをHTMLにインライン挿入

gulp-file-include

gulp-file-include という npm パッケージを使います。

gulp-file-include | npm

上記のリンクを見てもらえばだいたいわかると思います。今回は基本的な機能のみ使用。

インストール

npm install --save-dev gulp-file-include

gulpfile.js

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

gulp.task('include', function() {
    gulp.src("php/*.php")
    .pipe(fileInclude())
    .pipe(gulp.dest('dist/php'));
});

php ファイルに指定したファイルをインクルードして dist フォルダ出すというタスクです。

php(html)のインクルードしたい箇所に以下のよう記述をします。

<html>
    <head>

    ・・・

        <style>

            @@include('..\dist\css\mini.css')

        </style>

        ・・・

        <script>

            @@include('..\dist\js\mini.js')

        </script>
    </body>
</html>

style タグの中には圧縮した CSS、script タグの中には圧縮した JavaScript を入れ込んでいます。

@@include() のカッコ内に入れ込みたいファイルパスを指定します。デフォルトではその php ファイルとの相対パスでの指定となるので ..\ など相対指定を使いましょう。

結果として以下のようなファイルが出力されます。

<html>
    <head>

    ・・・

        <style>

            a,input,textarea{border-radius:4px}a,body{color:#333}
            ・・・
            #nav-next{margin-top:24px}}

        </style>

        ・・・

        <script>

            !function(){function e(e)
            ・・・
            document.body.appendChild(e)}},!1)}();

        </script>
    </body>
</html>

出来上がった php ファイルにはインラインで css と js ファイルが埋め込まれています。

オプション

パスの指定はオプションでルートからの絶対パスの指定にすることも出来ます。

絶対パス指定オプション

.pipe(fileInclude({
  basepath: '@root'
})

ただし、基本的には管理のために相対パスで指定しといたほうが後々楽なはずです。

gulp-file-include には他にも変数などいろいろな機能があるみたいです。ただ有効に使う方法が思いつきません。興味のある方は調べてみてください。

まとめ

PageSpeed Insights でも指摘されますが、「ファストビュー関連の CSS や JavaScript はインラインにせよ」をこれで実現することが出来ますね。

link 要素や script 要素に href、src でソース指定して上げるのが一般的ですが、表示高速化のためにインライン化は必要です。Gulp と gulp-file-include を使えば簡単に挿入できファイル自体は分けておけるので管理も楽です。

似たような事ができる Gulp プラグインは沢山あるのですが単純にファイルを挿入するだけ、という機能のみで十分だと思ったのでこの方法を採用しました。php ファイルに php ファイルを挿入するなど単純なインクルードなどでも使えるので、この方が色々応用が効きます。