Web制作の効率化に役立つ「Gulp」を使って、CSSファイルの容量を減らす（軽量化する）方法があります。
「CSSファイルの容量を減らす（軽量化する）」とは、何のことを指しますか？
「CSSファイルの容量を減らす（軽量化する）」とは、大まかに表現すると、CSSファイル中にある不要なコメントや改行などを取り除いて、CSSファイルの容量を軽くすることを指します。（Googleのドキュメントではこれを圧縮という表現を使っています。圧縮といえば「zipやrar圧縮のことを指すんじゃないの？」という解釈する方もいるので、圧縮という表現はあえてしないことにして、以下話を進めています。）
例えば、同じ内容でも10KBのファイルと5KBのファイルでは、単純に容量が少ない5KBのファイルの方が読み込み速度が速くなります。CSSファイルの軽量化は読み込み速度の向上にもつながり、Webサイトの表示速度の向上にもつながります。
モジュールをインストールしよう
それでは、さっそくGulpを使ってCSSファイルを軽量化てみましょう。
Gulpのインストールは済んでいるものとして進めますので、まだインストールされていない場合は、以下のページに方法を書きましたのでご参考ください。
まずはCSSファイルを軽量化するのに便利なモジュールをインストールします。
GulpにはCSSファイルを軽量化するモジュールがいくつかあります。今回は、そのモジュールの中から「gulp-cssmin」をインストールします。
コマンドプロンプト（ターミナル）を起動して作業フォルダ（「htdocs」とします）までcdコマンドで移動し、以下のコマンドを実行します。
npm install gulp-cssmin --save-dev
モジュールをインストールしたら、軽量化したいCSSファイルを用意しましょう。
CSSファイルを用意しよう
今回は例として「style.css」というCSSファイルを作って、以下のようなスタイルを書いて保存します。
CSSファイルの内容
html{
font-size: 62.5%; /*フォントサイズ指定*/
}
body{
margin: 0;
}
/*----
見出し
----*/
h1{
font-size: 2rem;
margin: 0;
padding: 0;
}
作業フォルダ「htdocs」には、以下のようなファイルが入っているものとします。
次は「gulpfile.js」ファイルにCSSファイルを軽量化させるタスクを追加しましょう。
CSSファイルを軽量化させるタスクを追加しよう
「gulpfile.js」ファイルをテキストエディターで開いて、以下のように書いて保存しましょう。
gulpfile.jsファイルの内容
//「gulp」と「gulp-cssmin」を使うよ、という宣言
var gulp = require('gulp'),
CSSmin = require('gulp-cssmin');
// CSSファイルを軽量化
gulp.task('cssmin', function () { //タスク「cssmin」で何を実行させたいのか書こう
gulp.src('style.css') //どのファイルに対して行うかを指定
.pipe( CSSmin() ) //CSSファイルを軽量化
.pipe( gulp.dest('./min') ); //「作業フォルダ/min」フォルダ内に軽量化されたCSSファイルを作成
});
ここまで用意できたら、タスクを実行しましょう。
タスクを実行してCSSを軽量化しよう
コマンドプロンプト（ターミナル）を起動して、作業フォルダ内で以下のコマンドを実行します。
gulp cssmin
うまく実行できると、以下のようにコマンドプロンプト（ターミナル）に表示されます。この表示は「17ms（ミリ秒）でcssminのタスクを終了させたよ」という意味です。
タスクが終わったら、できあがったCSSファイルを見てみましょう。
CSSファイルを確認しよう
タスクが完了すると、作業フォルダ内に「min」というフォルダが作られて、その中に「style.css」ファイルが見つかります。
テキストエディターで「style.css」ファイルを開くと、以下のようにCSSファイルが軽量化されています。
CSSファイルが軽量化された
body,h1{margin:0}html{font-size:62.5%}h1{font-size:2rem;padding:0}
コメントや改行、プロパティと値が同じものはまとめて指定されていますね。これがCSSファイルの軽量化です。
まとめ
Gulpを使ってCSSファイルの容量を減らす（軽量化する）方法について書きました。今回はシンプルな例を挙げましたが、CSSファイルがとても大容量で複雑なものだったとしたら、手作業ではとても手間がかかりそうですね。その手間を補助する方法の1つとしてGulpをうまく使えば、Web制作の効率も上がります。
また、今回はCSSファイルの軽量化に焦点を絞りたかったのであえて書かなかったのですが、CSSの記述ミスなどでタスクが実行できず、軽量化ができない事があります。
その場合の対処法については次回以降にまとめますので、興味がありましたらまた読みに来てください。
このページを共有する