Webサイトコーディングのあれこれ: gulpで画像圧縮してみた（Windows）

今回はgulpで画像を自動圧縮してみましょう。
下記サイトを参考にさせていただきました。

gulpで簡単画像圧縮

前回は結構ボリュームがあったので今回はサクッといってみましょう(∩´∀｀)∩

【1】前回作成したsampleフォルダ内のgulpfile.jsを開きます。

下記を追記します。

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

と

//img
gulp.task('jpg', function() {
   gulp.src('gulp/**/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('png', function() {
   gulp.src('gulp/**/*.png')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

と

gulp.watch(['gulp/**/*.jpg'],["jpg"]);
gulp.watch(['gulp/**/*.png'],["png"]);

を追記します。

（追記後）
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
var imagemin = require('gulp-imagemin');

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(sass())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream());
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
});

//img
gulp.task('jpg', function() {
    gulp.src('gulp/**/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('png', function() {
    gulp.src('gulp/**/*.png')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
    gulp.watch(['gulp/**/*.html'],["html"]);
    gulp.watch(['gulp/**/*.js'],["js"]);
    gulp.watch(['gulp/**/*.jpg'],["jpg"]);
    gulp.watch(['gulp/**/*.png'],["png"]);
});

※追記したら保存を忘れないようにｗ

【2】画像圧縮プラグインをインストール

コマンドプロントでsampleディレクトリまで移動します。

※コマンドプロントにcdと半角スペースを記述してsampleフォルダをドラッグ＆ドロップでエンター

（コマンドプロンプト表示例）
C:\Users\（ユーザ名）\Desktop\sample>

続いて下記コマンドを入力します。

（入力コマンド）
npm install gulp-imagemin --save-dev

インストール後にgulpと入力し実行しましょう。

【3】gulpフォルダ（作業フォルダ）内のimgフォルダに適当にネットから落としてきた画像を格納します。

下記サイトの写真（JPG）とベクター画像（PNG）を適当に落としてきましょう。

無料の写真 - Pixabay

jpgとpng画像を落としたらimgフォルダに格納します。

格納後コマンドプロントに圧縮％など表示され、
htmlフォルダ（出力フォルダ）にimgフォルダと圧縮された画像が出力されていればOK

これで作業フォルダ内のimgフォルダに画像を格納した時に
自動で出力フォルダに圧縮画像を生成してくれるようになりました。

次回は「gulpのメッセージ表示とエラー時監視を止めない（Windows）」です。