pug/scssコンパイルとオートリロード・画像圧縮

pugとscssをコンパイルしてオートリロードするgulp
ついでに画像圧縮も入れています
#scss/pug

まとめてインストール

```
npm install --save-dev gulp gulp-sass gulp-sourcemaps gulp-notify gulp-plumber gulp-postcss postcss-cssnext gulp-clean-css gulp-rename gulp-pug
```

#画像圧縮

まとめてインストール

```
npm install --save-dev gulp-imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo
```

#ファイル監視、オートリロード

```
npm install --save-dev browser-sync
```

#全ソース

```
/*
src 参照元を指定
dest 出力先を指定
watch ファイル監視
series(直列処理)とparallel(並列処理)
*/
const { src, dest, watch, series, parallel } = require('gulp');

//scss
const sass = require('gulp-sass');
const pug = require('gulp-pug');
const plumber = require("gulp-plumber");    // エラーが発生しても強制終了させない
const notify = require("gulp-notify");      // エラー発生時のアラート出力
const postcss = require("gulp-postcss");    // PostCSS利用
const cssnext = require("postcss-cssnext")  // CSSNext利用
const cleanCSS = require("gulp-clean-css"); // 圧縮
const rename = require("gulp-rename");      // ファイル名変更
const sourcemaps = require("gulp-sourcemaps");  // ソースマップ作成

//画像圧縮
const imagemin = require("gulp-imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");

//ブラウザリロード
const browserSync = require("browser-sync");

//postcss-cssnext ブラウザ対応条件 prefix 自動付与
const browsers = [
  'last 2 versions',
  '> 5%',
  'ie = 11',
  'not ie <= 10',
  'ios >= 8',
  'and_chr >= 5',
  'Android >= 5',
]

//参照元パス
const srcPath = {
  css: 'src/scss/style.scss',
  img: 'src/img/**/*',
  pug: 'src/pug/**/*.pug',
  html: './**/*.html'
}

//出力先パス
const destPath = {
  root: '.',
  css: 'dist/css/',
  img: 'dist/img/',
  html: 'dist/html/'
}

//sass
const cssSass = () => {
  return src(srcPath.css) //コンパイル元
    .pipe(sourcemaps.init())//gulp-sourcemapsを初期化
    .pipe(
      plumber(              //エラーが出ても処理を止めない
        {
          errorHandler: notify.onError('Error:<%= error.message %>')
          //エラー出力設定
        }
      )
    )
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(postcss([cssnext(browsers)]))//cssnext
    .pipe(sourcemaps.write('/maps'))  //ソースマップの出力
    .pipe(dest(destPath.css))         //コンパイル先
    .pipe(cleanCSS()) // CSS圧縮
    .pipe(
      rename({
        extname: '.min.css' //.min.cssの拡張子にする
      })
    )
}

//pug
const pugHtml = () => {
  return src(srcPath.pug)
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
    .pipe(pug({
      pretty: true,
      basedir: "src/pug"
    }))
    .pipe(dest(destPath.html))
}

//画像圧縮（デフォルトの設定）
const imgImagemin = () => {
  return src(srcPath.img)
    .pipe(
      imagemin(
        [
          imageminMozjpeg({
            quality: 80
          }),
          imageminPngquant(),
          imageminSvgo({
            plugins: [
              {
                removeViewbox: false
              }
            ]
          })
        ],
        {
          verbose: true
        }
      )
    )
    .pipe(dest(destPath.img))
}

//ローカルサーバー立ち上げ、ファイル監視と自動リロード
const browserSyncFunc = () => {
  browserSync.init(browserSyncOption);
}

const browserSyncOption = {
  server: {
    //ルートディレクトリの指定
    baseDir: destPath.html,
    serveStaticOptions: {
        extensions: ["html"]
    }
},
  open: true,
  reloadOnRestart: true,
}

//リロード
const browserSyncReload = (done) => {
  browserSync.reload();
  done();
}

//ファイル監視
const watchFiles = () => {
  watch(srcPath.html, series(browserSyncReload))
  watch(srcPath.css, series(cssSass, browserSyncReload))
  watch(srcPath.img, series(imgImagemin, browserSyncReload))
}

//処理をまとめて実行
exports.default = series(series(cssSass, pugHtml, imgImagemin), parallel(watchFiles, browserSyncFunc));
```


#参考リンク

- https://app.getpocket.com/read/3208244290
- https://kailo.jp/post/16