お寿司か焼き肉食べたい

まじめな事からしょーもない事まで

【gulp】ファイルを簡単にミニマイズしたい

投稿日:2017年09月13日 15時16分

まいどこんにちわ。
今回も正直煎じすぎて何も出ないレベルのお話になりますがご容赦ください。
今回はgulpでファイル圧縮を行う方法について出してみようと思います。
※ファイル圧縮って言ってますが、余分なスペースやら改行を取っ払ったものになります。
※特にjsファイル等変数名が簡略化するものではありませんのでご容赦ください。

どんな場面で使用する?

このお仕事している時にはよくファイルアップする事が多かったりします。
んで、ページ軽量化を兼ねてファイルを圧縮しておきたいことがあるかと思います。
ファイル更新の都度やってたら時間かかるし、結構煩雑になったりするもので作業効率が良くないイメージが多いですが
構築は普通にいつも通りやって、最後に圧縮して上げると作業も楽ちんですね。
そんな時gulpでやってあげるとらくです。

そもそもgulpってなんなん?

gulp(がるぷ)とは所謂「タスクランナー」と呼ばれるもので、自動化する所は自動化しちゃおぅ!ってのがコンセプトにあります。
Node.jsをベースにして動作します。
ここでは導入方法についての記述はありませんのでご容赦くださいね。

早速使いたい人へ

ファイル圧縮処理のダウンロード
こちらzipでまとめていますので良かったらどうぞ。

簡易マニュアル的なもの

readmeを書いているのでそっちみてよ!っと言いたい所ですが、ここでも簡単に書いておきますね。

構造

zip解凍すると

  root
   ┠━ opt_files
   ┃  ┗━ dummy.js
   ┠━ output_files
   ┃  ┗━ dummy.js
   ┠━ gulpfile.js
   ┠━ package.json
   ┗━ 

README.md

こんな感じで出てくると思います。
まず、2つあるdummy.js こいつはあくまでもダミーなので消していただいて大丈夫です。

対象ファイル

.html / .css / .jsの3ファイルのみとなります。

機能について

.html / .css / .jsのファイルの改行コード及びインデント用の不要スペースを削除します。
また、処理上コメントアウトで、gzip化させる処理も潜んでいます。コメントアウトを解除しない限りは行われません。

使い方

これら一式を好きな所に配置し、npm install等終わっているとの前提でお話します

  1. opt_filesディレクトリ内に圧縮かけたいファイルを設置します。(フォルダ毎入れてもらってOKです)
  2. コマンドラインからgulp実行します。
  3. output_filesに圧縮されたファイル一式が生成されます。

ってな感じの簡単コマンド一発!でおわります。

おわりにひとこと

gulpマジクソって思ってましたけど、手のひらひっくり返しそうです。

一覧に戻る