【56：タスクランナー】Gulpで自動画像圧縮

f:id:seintoseiya:20160416000827j:plain
プロジェクトNo.55：タスクランナー

前回はNode.jsを導入したので、次はGulpというツールを使って見る。
フロントエンドのお仕事って覚えることいっぱいありますね。

さて、今回使うGulpというツールは、Node.js上で動くタスク自動化のためのビルドツールです。
Gulpの特徴としては、タスク定義をシンプルなJavaScriptで記述し、動作するのが特徴の様です。

Gulpのインストール

Gulpをグローバルにインストール

$ npm install -g gulp

パッケージ管理のためにpackage.jsonを作成

作業ディレクトリに移動してから以下コマンドを実行。

$ npm init

実行したディレクトリ上にpackage.jsonができる。

Gulpをローカル（プロジェクト毎）にインストール

$ npm install --save-dev gulp

インストールしたプラグインのバージョンが、自動的にpackage.jsonファイルに追記される。

画像を圧縮するタスクをGulpを使って処理する

imagesフォルダを作成

圧縮対象となる画像を入れるフォルダとして、
作業ディレクトリのトップにimagesフォルダを作成します。
あと適当にいくつか画像ファイルを入れます。

gulp-imageminプラグインのインストール

画像を圧縮するgulp-imageminというプラグインをインストールします。

$ npm install --save-dev gulp-imagemin

JSファイルを作成

ICR MEDIAさんのソースをご参考にしてください。

タスクの実行

$ gulp imageMinTask

imageMinTaskはJSコード内で宣言したタスク名です。

正常に実行できたらJSコード内で指定したディレクトリに圧縮された画像が出力されているはずです。

watch機能を使ってタスクを自動実行

watch機能とはファイルの更新があったらそのタイミングでタスクを自動で実行してくれるというものです。
実装は簡単で先ほど作ったJSコードの

gulp.task("watchTask", function() { // タスク名「watchTask」
	// gulp.watch("監視するファイル", 処理)
	gulp.watch("images/**", function() {   // imagesフォルダー以下のファイルを監視
		// タスク処理
	});
});

監視タスクを実行

$ gulp watchTask

imagesフォルダに画像を入れると自動で圧縮して出力してくれます。
ファイルの監視を終了する場合は、コマンドラインで[Ctrl]と[C]キーを同時に押します。

参考サイト

絶対つまずかないGulp 4入門(2021年版) - インストールとSassを使うまでの手順 - ICS MEDIA
いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール：MEANスタックで始めるWebアプリ開発入門（2）（2/2 ページ） - ＠IT

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。