Gulpを使ってHTML,PHPファイルなどにJavaScript・CSS・画像の外部ファイルを読み込みインラインで書き出す方法

効率化 このページをあとで読む

「JavaScriptやCSSはHTMLファイルに直接書かずに、外部ファイルを作って読みこめばいいんだ」と昔は考えていましたが・・・

外部ファイルの読み込みによって、表示するページのレンダリングをブロックしないように「インラインで書く」ことを検討する機会もここ数年で増えてきました。

インラインで書く時に注意したい「保守性」と「可読性」

私個人的なことですが「インラインで書く」作業ってのは、追記・削除などのメンテナンス作業が発生した場合にHTMLファイル上でJavaScriptやCSSを編集する必要があるので、保守性・可読性の面であまりよくないな～と感じます。

できればCSSはCSSファイル、JavaScriptはJavaScriptファイルとして、分けて管理したいです。

そんな時には、外部ファイルを読み込んでインラインで書き出してくれる、便利なGulpプラグイン「gulp-inline-source」があるので使ってみましょう。

以下にインストール手順や動作サンプルなどを書きましたので、似たようなことがしたい方はご参考ください。

※Gulpをインストールしていない場合は以下のページをご参考ください。

Web制作の効率を上げることができる「Gulp」をインストールする方法このページをみる

準備ができたら、Gulpプラグインをインストールしましょう。

Gulpプラグインをインストール

まずはコマンドプロンプト（ターミナル）を起動して、Gulpがインストールされているフォルダ（以降 作業フォルダ）まで移動して、以下のコマンドを実行します。

npm install gulp-inline-source --save-dev

gulp-inline-sourceを読み込もう

次に、作業フォルダ内にgulpfile.jsファイルを作成してテキストエディターで開いて、gulpとgulp-inline-sourceを読み込みます。

var gulp = require('gulp');
var inlinesource = require('gulp-inline-source');

次に、前準備としてインラインで書きだすためのJavaScript,CSS,画像ファイルをそれぞれ用意して、HTMLファイルに読みこみます。

以下にサンプルを書きました。

JavaScriptファイルをインラインで書き出す場合はこう書く

JavaScriptファイルを用意します。例として「main.js」ファイルを作成して、以下のように書きます。

main.js

//テキストの色変更
function changecolor(e) {
 e.style.color = '#0ff';
};

HTMLファイルに「main.js」ファイルを読み込みます。このとき、「script」要素に「inline」と書きましょう。

HTML

<!DOCTYPE html>
<html>
 <head></head>
 <body>
  <script src="./main.js" inline></script>
 </body>
</html>

CSSファイルをインラインで書き出す場合はこう書く

CSSファイルを用意します。例として「style.css」ファイルを作成して、以下のように書きます。

style.css

body{
 margin: 1rem;
}

/*----
見出し
----*/
h1{
 font-size: 2rem;
 margin: 0;
 padding: 0;
}

HTMLファイルに「style.css」ファイルを読み込みます。このとき、「link」要素に「inline」と書きましょう。

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel='stylesheet' href='./style.css' type='text/css' media='all' inline>
 </head>
 <body>
  <script src="./main.js" inline></script>
 </body>
</html>

画像ファイルをインラインで書き出す場合はこう書く

画像ファイルを用意します。例として、閉じるボタンなどでよく使う「×」を描画する「close.svg」ファイルを用意します。

close.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>

HTMLファイルに「close.svg」ファイルを読み込みます。このとき、「img」要素に「inline」と書きましょう。

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel='stylesheet' href='./style.css' type='text/css' media='all' inline>
 </head>
 <body>
  <img src="./close.svg" inline>
  <script src="./main.js" inline></script>
 </body>
</html>

インラインで書くためのタスクを書こう

ここまでで、JavaScript,CSS,画像ファイルを読み込んでインラインで書き出すための前準備ができました。

最後に「gulpfile.js」ファイルにインラインで読みこむためのタスクを書きます。

//インラインで書き出し
gulp.task( 'inlinesource', function() { //タスク「inlinesource」の内容を書こう
 return gulp.src( './index.html' ) //どのファイルに対して行うかを指定
 .pipe( inlinesource() ) //インラインで読みこんで書き出し
 .pipe( gulp.dest( './out' ) ); //「作業フォルダ/out」フォルダ内にファイルを作成
});

タスクを動かそう

タスクを書いたら、コマンドプロンプト（またはターミナル）を起動して、以下のコマンドを実行します。

gulp inlinesource

表示結果サンプル

タスクがうまく実行されると、読みこんだJavaScript,CSS,画像が以下のようにインラインで書き出されます。

<!DOCTYPE html>
<html>
 <head>
 <style type="text/css" media="all">body{margin:1rem}h1{font-size:2rem;margin:0;padding:0}</style>
 </head>
 <body>
 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
 <script>function changecolor(o){o.style.color="#0ff"}</script>
 </body>
</html>

上記の結果を見ると、JavaScript,CSSがminify（軽量化）された状態で読み込まれています。

まとめ

JavaScript,CSS,画像をHTMLファイルに「インラインで書く」ときに便利なGulpプラグインについてでした。

今回はHTMLファイルを例にしましたが、PHPファイルにももちろん使えます。

私の場合は、WordPressのテンプレートファイル（functions.php含む）にインラインで書き出すために使っています。

また、「gulp-inline-source」を使えば、気になっていたインラインで書き出されたコードの保守性・可読性も維持できると思います。

  • JavaScriptを変更したければ、外部JavaScriptファイルを編集してインラインで書き出し
  • CSSを変更したければ、外部CSSファイルを編集してインラインで書き出し

という管理ができますね。

あと、インラインで書き出す際に「事前にminifyの作業はしなくてもいい」というのはかなり便利ですね。(minifyを無効にもできます)

その他、使えるオプションなど詳しい使い方は「gulp-inline-source」のドキュメントをご参考ください。

著者:bouya Imamura