在宅ワーク知恵袋

gulpで簡単画像圧縮


gulp

gulp

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

Nodeのインストール

nodejs-dark

node.js

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

gulpインストール

コマンドラインで

[bash]npm install -g gulp[/bash]

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

[bash]cd xxx[/bash]

package.json生成

[bash]npm init[/bash]

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

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

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

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

[bash]npm install gulp –save-dev[/bash]

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

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

[bash]npm install gulp-imagemin –save-dev[/bash]

タスク

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

[js]
var gulp = require(‘gulp’);
var imagemin = require("gulp-imagemin");
gulp.task("default", function() {
gulp.src("images/*.jpg")
.pipe(imagemin())
.pipe(gulp.dest("./dist/images"));
});
[/js]

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

[bash]gulp[/bash]

実行

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

gulp-imagemin

watch機能

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

[js]
var gulp = require(‘gulp’);
var imagemin = require("gulp-imagemin");
gulp.task("watchTask", function() {
gulp.watch("images/**", function() {
gulp.src(["images/*.jpg","images/*.png"])
.pipe(imagemin())
.pipe(gulp.dest("./dist/images"));
});
});
[/js]

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

[bash]gulp watchTask[/bash]

監視開始

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

その他

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

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


この記事を書いた人:IBC

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