在宅ワーク知恵袋

gulpで簡単画像圧縮


gulp

gulp

CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイル、画像の圧縮を自動でやってくれる便利なツール。
とにかく自動でバシバシやってくれます。

Nodeのインストール

nodejs-dark

node.js

ダウンロードしてインストーラーを展開すればOK

gulpインストール

コマンドラインで

制作しているフォルダに移動

package.json生成

すると、いろいろ出てきますが後で変更できるので、とりあえずひたすらenter

スクリーンショット 2015-12-17 12.16.39

すると
package.jsonというファイルが生成されます。

スクリーンショット 2015-12-17 12.19.26
ローカルにもgulpをインストール

スクリーンショット 2015-12-17 12.22.01
node_modulesが追加されました。

プラグインのインストール

タスク

処理はgulpfile.jsという名前のファイルを(手動)作成し記述していきます。

imagesフォルダの中のすべてのjpgファイルを圧縮してdistフォルダの中のimagesフォルダに格納という処理になります。

実行

スクリーンショット 2015-12-17 12.33.06

gulp-imagemin

watch機能

ファイルの変更等があった際に自動で生成してくれます。

このように記述するとOK
※jpgだけじゃなくてpngも圧縮するように修正しています。

監視開始

スクリーンショット 2015-12-17 13.36.22
このように自動で処理してくれます。

その他

cssの圧縮:gulp-cssmin
JSの圧縮:gulp-uglify
使っていないCSSの削除:gulp-uncss
ファイルの結合:gulp-concat
ファイル名(min.xx)変更:gulp-rename

他にもたくさんプラグインがあるので、いろいろ試してみてはいかがでしょうか。
慣れてしまえば、負担は確実に軽減されます。
ぜひお試しを。


この記事を書いた人:IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。