最近のgulp v4系

私が最近使っているgulpの設定を公開します。
ずっとv3系を使っていたのですが、そろそろv4系に切り替えることにしました。

webpackを使う場合はこちら
gulp v3系の設定はこちら

ディレクトリ構造

/source/内のファイルが/dist/assets/に出力されます。

.
├── dist
│   └── assets
│       ├── css
│       ├── img
│       ├── js
│       ├── sourcemaps
│       └── ssi
├── gulpfile.js
├── node_modules
├── package-lock.json
├── package.json
└── source
    ├── img
    ├── js
    └── scss

gulpfile.js

新たに追加されたlastRun()だと、gulp起動時のみ全画像を再圧縮してしまったので、changedプラグインを使っています。

gulpfile.js

const gulp = require("gulp");
const browserSync = require("browser-sync");
const ssi = require("connect-ssi");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const glob = require("gulp-sass-glob");
const notify = require('gulp-notify');
const plumber = require("gulp-plumber");
const babel = require('gulp-babel');
const uglify = require("gulp-uglify-es").default;
const imagemin = require("gulp-imagemin");
const mozjpeg = require("imagemin-mozjpeg");
const pngquant = require("imagemin-pngquant");
const changed = require('gulp-changed');

const paths = {
  rootDir: "dist/",
  scssSrc: "source/scss/**/*.scss",
  jsSrc: "source/js/**/*.js",
  imgSrc: "source/img/**/*",
  outCss: "dist/assets/css",
  outJs: "dist/assets/js",
  outImg: "dist/assets/",
};

// browser sync
function browserSyncFunc(done){
  browserSync.init({
      server: {
          baseDir: paths.rootDir,
          middleware: [
            ssi({
              baseDir: paths.rootDir,
              notify: false, //通知
              ext: ".html"
            })
          ]
      },
      port: 4000,
      reloadOnRestart: true
  });
  done();
}

// sass
function sassFunc() {
    return gulp.src(paths.scssSrc , {
        sourcemaps: true
    })
    .pipe(plumber({
        errorHandler: notify.onError('<%= error.message %>'),
    }))
    .pipe(glob())
    .pipe(sass({
        outputStyle: 'compressed'
    }))
    .pipe(gulp.dest(paths.outCss), {
        sourcemaps: './sourcemaps'
    })
    .pipe(autoprefixer({
      browsers: ["last 2 versions", "ie >= 11", "Android >= 4"],
      cascade: false
    }))
    .pipe(gulp.dest(paths.outCss), {
        sourcemaps: './sourcemaps'
    })
    .pipe(browserSync.stream());
}

// js
function jsFunc() {
  return gulp.src(paths.jsSrc , {
    sourcemaps: true
  })
  .pipe(plumber({
    errorHandler: notify.onError('<%= error.message %>'),
  }))
  .pipe(babel())
  .pipe(uglify({}))
  .pipe(gulp.dest(paths.outJs));
}

// img
function imgFunc() {
  return gulp.src(paths.imgSrc)
  .pipe(changed(paths.outImg))
  .pipe(gulp.dest(paths.outImg))
  .pipe(imagemin(
    [
      mozjpeg({
        quality: 80 //画像圧縮率
      }),
      pngquant()
    ],
    {
      verbose: true
    }
  ))
}

// watch
function watchFunc(done) {
  gulp.watch(paths.scssSrc, gulp.parallel(sassFunc));
  gulp.watch(paths.jsSrc, gulp.parallel(jsFunc));
  gulp.watch(paths.imgSrc, gulp.parallel(imgFunc));
  done();
}

  // scripts tasks
gulp.task('default',
gulp.parallel(
  browserSyncFunc, watchFunc, sassFunc, jsFunc,imgFunc
  )
);

.babelrc

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": ">0.25% in JP, not ie <= 10, not op_mini all"
            }
        ]
    ]
}

・その他設定方法
babel公式サイト

・targetsの対象ブラウザは下記のサイトで確認できます。
browserl.ist

package.json

package.json

{
  "name": "name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.5",
    "browser-sync": "^2.26.5",
    "connect-ssi": "^1.1.1",
    "gulp": "^4.0.1",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-babel": "^8.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-imagemin": "^5.0.3",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.0.9",
    "gulp-uglify-es": "^1.0.4",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^7.0.0"
  }
}

プラグインの説明

• browser-sync ブラウザ確認環境
• connect-ssi SSIを使用可能にする
• gulp-sass SASSを使用可能にする
• gulp-autoprefixer ベンダープレフィックス付与
• gulp-sass-glob import文でワイルドカードが使用可能になる
• gulp-plumber エラー時の強制停止を防止
• gulp-babel JavaScriptのコード変換
• gulp-uglify-es JavaScriptのminify化
  gulp-uglifyだとES6に対応していないため、gulp-uglify-esを使用する必要があります。
• gulp-imagemin 画像圧縮
• imagemin-mozjpeg Mozilla製のjpegエンコーダ　画像圧縮時の品質は80%に設定しています。
• imagemin-pngquant pngエンコーダ
• gulp-changed 更新されたファイルのみ処理させるプラグイン