前回のGulp4の記事は、環境を整えるまでを書きました。
今回は、普段よく使っているパッケージを紹介します。数が多いので詳細な使い方などはそれぞれ個別の記事にしていく予定です。

gulp-sass

Saccを自動でコンパイルしてくれるモジュール。Sassを使う場合は必須のパッケージ。
使い方のサンプル例。

const { src, dest, watch, series} = require('gulp'),
    sass = require('gulp-sass');
	
const paths = {
    'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
    'css':'./www/css/',//CSSファイルの格納ディレクトリ
	}

const compileScss = (cd) => {
    src(paths.scss + '**/*.scss')
        .pipe(//sassコンパイルの設定
            sass({
                outputStyle: 'expanded',//通常のCSSスタイルの書き出し
                //outputStyle: 'compact',//行間圧縮スタイル
                //outputStyle: 'compressed',//圧縮の書き出し
            })
                .on('error', sass.logError)
        )
        .pipe(dest(paths.css));//CSSの書き出しディレクトリ
    cd();
}

gulp-sassの書き出しで圧縮（minify）することができますが、後述するgulp-clean-cssなどを使い、通常のCSSファイルとminify化したファイルの２つを作る方がお勧めです。

browser-sync

ファイルの変更を監視して、変更があった時にブラウザを自動でリロードするように設定ができるパッケージ。
サンプル例

const { src, dest, watch, series} = require('gulp'),
	browserSync =require('browser-sync');

const browser_sync = (cb) => {
    browserSync.init({
        server  :{
              baseDir:paths.root//HTMLページが格納されているディレクトリ
           }
    });
    cb();
}
/**
 * Browser reload
 */
const browser_reload = (cb) => {
    browserSync.reload(); //ブラウザの自動リロード設定
    cb();
}

browserSync.initでプロキシを使い、MAMPやDockerなどで作ったローカル環境のURLを指定することも可能です。

例)

const browser_sync = (cb) => {
    browserSync.init({
        proxy: "xxx.xxx.xxx", //URLなど
    });
    cb();

gulp-group-css-media-queries

別々の場所にかかれた、同じ設定内容のメディアクエリをまとめてくれる便利なパッケージ。
これは本当に便利で、開発スピードがものすごく上がります。

＊gulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。

gulp-autoprefixer

CSSベンダープレフィックスを自動でつけてくれるパッケージ。ベンダープレフィックス地獄から解放されます！

＊こちらもgulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。

gulp-clean-css

スタイルシートを圧縮（minify）するパッケージです。

＊gulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。

gulp-rename

ファイルをminifyする際にファイル名を変更するのに使うパッケージです。

上記4つをgulp-sassの処理中に実行するサンプル例）

const { src, dest, watch, series} = require('gulp'),
    sass = require('gulp-sass'),
    gcmq = require('gulp-group-css-media-queries'),
    autoprefixer = require('gulp-autoprefixer'),
	cleanCSS = require('gulp-clean-css')
	rename = require("gulp-rename");
	
	const paths = {
    'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
    'css':'./www/css/',//CSSファイルの書き出しディレクトリ。
    'root':'./',//HTMLルート
};


/**
 * for SCSS Compile task
 *  
 */
const compileScss = (cd) => {
    src(paths.scss + '**/*.scss')
        .pipe(sassGlob())
        .pipe(//sassコンパイルの設定
            sass({
                outputStyle: 'expanded',//通常のCSSスタイルの書き出し
            })
                .on('error', sass.logError)
        )
        .pipe(
            autoprefixer({//ベンダープレフィックスの自動追加処理
                browsers: ['last 2 version', 'iOS >= 11', 'Android >= 6'],//ここでどのOSやブラウザのバージョンまで対応か設定
                cascade: false,

            })
        )
        .pipe(gcmq())//メディアクエリをまとめる処理
        .pipe(dest(paths.css))//CSSの書き出しディレクトリへ出力
        .pipe(cleanCSS({ rebase: false }))//CSSのminify処理
        .pipe(rename({//minifyしたファイルの名前変更
            extname: '.min.css'
        }))
        .pipe(dest(paths.css));//CSSの書き出しディレクトリ
    cd();
}

gulp-uglify-es

こちらは、JavaScriptを圧縮（minify）するパッケージです。

gulp-inline-source

CSSやJavaScriptをインライン化するパッケージ。

gulp-imageminとimagemin-pngquantとimagemin-mozjpeg

画像を圧縮するためのモジュール群。

• gulp-imagemin
  定番の画像圧縮のパッケージ
• imagemin-mozjpeg
  Mozillaが開発したJpegエンコーダーmozjpegのパッケージ。
• imagemin-pngquant
  TinyPNG並のPNGファイルの圧縮ができるパッケージ。
• gulp-changed
  変更があったファイルだけを移動させたりなどの処理を行うパッケージ。

画像圧縮のサンプル例）

const imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    mozjpeg = require('imagemin-mozjpeg'),
    changed = require('gulp-changed');
	
	const paths = {
    'src':'./src/',//developer files
    'image_src':'./src/images/',//元画像ディレクトリ
    'image_dist':'./www/images/'//画像書き出しディレクトリ
};
	
/**
 * for image minfy
 */
const image_min = (cb) => {
    src(paths.image_src + '**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(changed(paths.image_dist))
    .pipe(imagemin([
        pngquant({
            quality: '65-80',
            speed: 1,
            floyd: 0
        }),
        mozjpeg({
            quality: 50,
            progressive: true
        }),
        imagemin.svgo(),
        imagemin.optipng(),
        imagemin.gifsicle()
    ]))
        .pipe(dest(paths.image_dist));
    cb();
}

gulp-sass-glob

Sassの複数のimportを、ワイルドカードなどのパターンで一括で記述ができるようになるパッケージ。

サンプル例）

//@                             @
//@     page.scssファイル
//@                             @

@import "./object/project/**/*-st.scss";