文系卒のWebエンジニアの成長と備忘録
エンジニア経験を生かして発信するメディアサイト

gulp4を使用してcssとjsの圧縮を行う

javascript プログラミング

こんにちはYsです。普段、Web系のサーバー寄りのエンジニアとして働いています。
この記事ではフロントエンジニアとして勉強中の方、Webページを製作している方向けになります。

gulp4を使用して、cssとjsの圧縮を行う環境を作るための解説記事になります。

gulpと呼ばれるタスクランナーを使用して、cssやjsを圧縮していきます。
使用するパッケージは以下です。

gulp-clean-css
CSSの圧縮を行う
gulp-uglify
JSの圧縮を行う
gulp-rename
ファイル名の変更を行う



目次

  • なぜCSSやJSファイルを圧縮する必要があるのか
  • gulp4の環境構築を行う
  • 実際にファイルを確認する

なぜCSSやJSファイルを圧縮する必要があるのか

cssやjsを圧縮することの最大のメリットは「ファイルサイズが小さくなり、読み込みが早くなる」です。

通常のCSSにおいてはコーダーが書きやすい、読みやすいようにインデントが使用されています。大体は以下ような書き方が一般的です。

.div {
	text-align: center;
	font-weight: bold
}

ただ、これはあくまで人間が読むための視点。ブラウザ的にはインデントが付いていようが、付いていまいが特に関係ありません。

実はこのインデント分もファイルのサイズに含まれるため、微小ですがファイルサイズが大きくなっています。

一つ一つは小さいですが、レイアウトが複雑だったりすると、CSSも複雑かつ大量の記述が発生するので、インデントの量もバカに出来ません。

ファイルサイズが大きくなると、ブラウザ側の表示が遅くなったり、サーバー側のメモリも圧迫してしまいます。
そのため、その無駄なインデントをタスクランナーを用いて、削除します。

実際にインデントが削除されるとファイルは以下のようになります。

.div{text-align:center;font-weight:bold}

上記とは違い、非常に読みにくいですが機械的には同じ記述なので画面上では何も変わりありません。
これを人間が読もうとしたり、編集したりするのは酷です。

そのため、人間が読むファイルと、機械(ブラウザ)が読むファイルは分けなくてはいけません。なのでファイルの出力を分ける必要性があります。

以下のような構成で行うと、ディレクトリ構成も分かりやすく良いと思います。

├── _devtools
│   ├── gulpfile.js   // ここのタスクランナーの記述を書きます
│   ├── node_modules
│   └── package.json.
├── js
|   └── sample.js     // コーダー自身が触るファイル
├── css
|   └── sample.css    // コーダー自身が触るファイル
└── dest
   └── sample.min.css // ブラウザ側が読み込むファイル
   └── sample.min.js  // ブラウザ側が読み込むファイル

コーダー自身は、〈sample.css〉の方を基本的に修正し、 〈sample.min.css〉においてはタスクランナーによって別ファイルとして切り出されるため、こちら側は修正を行ったり閲覧はしません。

そしてHTML側では、〈sample.min.css〉を読み込むようにします。

このファイルを切りわかるために、「gulp-rename」というパッケージ使用しています。これはsample.cssというファイル名を参考にsample.min.cssという別ファイルを作成するといった意味合いになります。

実際に上記を動かすための環境構築をしていきます。

gulp4の環境構築を行う



gulpのインストールにはNode.jsと呼ばれるものとnpm(node package manager)のインストールが必要になります。

上記のインストールについては以下の記事で詳細に記載していますので、インストールされていない方は参考にしてください。

gulpの詳細な説明等も以下の記事に記載しています。合わせてお読みいただくと理解が深まると思います。

まずはgulpfile.jsがあるディレクトリまで移動し、gulpのタスクランナー用のパッケージをインストールします。

gulpのインストール

上記で紹介した記事でも行なっていますが、一応念の為にこちらにも記載しておきます。

$ npm install -D gulp

npm notice save gulp is being moved from dependencies to devDependencies
npm WARN design_demo@1.0.0 No repository field.

+ gulp@4.0.2
updated 1 package and audited 13085 packages in 5.228s
found 0 vulnerabilities

上記でWARNなど出現しますが基本的に無視して大丈夫です。

gulp-clean-cssのインストール

$ npm install -D gulp-clean-css
npm WARN design_demo@1.0.0 No repository field.

+ gulp-clean-css@4.2.0
updated 1 package and audited 13085 packages in 3.553s

gulp-uglifyのインストール

$ npm i -D gulp-uglify
npm WARN design_demo@1.0.0 No repository field.

+ gulp-uglify@3.0.2
updated 1 package and audited 13085 packages in 3.21s
found 0 vulnerabilities

gulp-renameのインストール

$ npm install -D gulp-rename
npm WARN design_demo@1.0.0 No repository field.

+ gulp-rename@1.4.0
updated 1 package and audited 13085 packages in 3.285s

これで環境構築は完了です。

ここまでで、上記のコマンドを打ったディレクトリ内にpackage.jsonというファイルが作成されていると思います。(設定ファイルと思ってください)

ここで念の為に確認を。
自分の使用しているpackage.jsonが以下のようになっていれば成功です。(dependenciesdevDependenciesの配列の中に上記でインストールしたパッケージの名前が乗っていればOK)

package.jsonの作成方法も上記で紹介した記事に記載があるで、分からないという方はそちらを見ていただければと思います。

{
  "name": "design_demo",
  "version": "1.0.0",
  "description": "デザイン用のリポジトリ",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ys",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.2"
  },
  "devDependencies": {
    "gulp-clean-css": "^4.2.0",
    "gulp-imagemin": "^6.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2"
  }
}

次は実際にgulpfile.jsに諸々の記述を書いていきます。

gulpfile.jsを書いていく



まずはパッケージが使用できるように、宣言をします。

var gulp = require('gulp');
var cleanCSS = require("gulp-clean-css");
var rename   = require("gulp-rename");
var uglify = require("gulp-uglify");

次に実際にファイルを圧縮して、別ファイルに切り出す作業を書いていきます。
ここでは「タスク」と呼ばれ、メソッドのようなものと考えると良いと思います。

ファイルに変更があったら以下の「タスク」を呼び出し、圧縮と別ファイルへの書き出しを行います。

// cssの圧縮&rename
gulp.task('css-minify', function(done) {
    gulp.src('../css/*.css')
        .pipe(cleanCSS())
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest('../dest/'));
    done();
});

// jsの圧縮&rename
gulp.task('js-minify', function(done) {
    gulp.src('../js/*.js')
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest('../dest/'));
    done();
});

ファイルに変更があったかどうかを監視してくれる便利な「watch」というタスクがあるので、そのタスクを使用して、ファイルに変更があった場合に上記のタスクを呼び出してあげます。

// 監視ファイル
gulp.task('watch-files', function(done) {
    gulp.watch("../css/*.css", gulp.task('css-minify'));
    gulp.watch("../js/*.js", gulp.task('js-minify'));
    done();
});

あとはタスクランナー起動時に呼び出されるタスクにwatchのタスクを書いておけばOKです。

gulp.task('default', gulp.series('watch-files', function(done){
    done();
}));

これであとは、実際にgulpfile.jsがある場所でgulpとターミナルで打ち、以下のように出力されていればOKです。

$ gulp
[19:14:10] Using gulpfile ~/_devtools/gulpfile.js
[19:14:10] Starting 'default'...
[19:14:10] Starting 'watch-files'...
[19:14:10] Finished 'watch-files' after 13 ms
[19:14:10] Finished 'default' after 16 ms

では、実際にCSSファイルやJSファイルを編集してみてください。
以下のようにターミナルが更新されていればタスクが実行されています。

[19:18:08] Starting 'css-minify'...
[19:18:08] Finished 'css-minify' after 2.96 ms
[19:18:08] Starting 'js-minify'...
[19:18:08] Finished 'js-minify' after 2.96 ms

タスクが実行されているのが確認取れたら、dest/ディレクトリを見てみると、ファイルに.min.cssなどが出来上がっているはずです。そのファイルを見てみると改行やインデント無しの、以下のように文字が羅列されたCSSやJSが出力されているはずです。

@charset "UTF-8";*{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-appearance:none;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

説明が他の記事と重複する部分があったので、少し雑になってしまいましたが、説明が足らないという方や、
「ファイルに変更があったらブラウザを自動でリロードさせたい」「sassを自動でコンパイルしたい」などの機能の追加など説明は以下の記事で解説、記載しています。



\記事のシェアをお願いします!/