gulpで簡単画像圧縮

更新：2017/12/05
ライター：IBC

gulp

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

Nodeのインストール

node.js

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

gulpインストール

コマンドラインで

npm install -g gulp

1	npm install -g gulp

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

cd xxx

cd xxx

package.json生成

npm init

npm init

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

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

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

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

npm install gulp --save-dev

1	npm install gulp --save-dev

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

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

npm install gulp-imagemin --save-dev

1	npm install gulp-imagemin --save-dev

タスク

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

var gulp = require('gulp');
var imagemin = require(&quot;gulp-imagemin&quot;);
gulp.task(&quot;default&quot;, function() {
    gulp.src(&quot;images/*.jpg&quot;)
        .pipe(imagemin())
        .pipe(gulp.dest(&quot;./dist/images&quot;));
});

var gulp = require('gulp');

var imagemin = require("gulp-imagemin");

gulp.task("default", function() {

gulp.src("images/*.jpg")

.pipe(imagemin())

.pipe(gulp.dest("./dist/images"));

});

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

gulp

gulp

実行

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

gulp-imagemin

watch機能

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

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