自分が使うgulp(4系)設定＆プラグイン

gulpプラグイン

デフォルト（あった方がいいプラグイン）

gulpfile.js

const gulp = require("gulp");

const notify = require('gulp-notify');
const plumber = require('gulp-plumber');

SASSコンパイル

gulpfile.js

const sass = require("gulp-sass");
const sourcemaps = require('gulp-sourcemaps');
const sassGlob = require('gulp-sass-glob');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

function sassFuncs() {
  return gulp
    .src(`./SRC_FOLDER/**/*.scss`)
    .pipe(sassGlob())
    .pipe(sourcemaps.init())
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(sass({
        outputStyle: 'compressed'
    }))
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`${paths.css}`))
}

const watchSassFiles = () =>
  gulp.watch(`./DIST_FOLDER/**/*.scss`, sassFuncs);

Pug(JADE)コンパイル

gulpfile.js

const pug = require('gulp-pug');

//Pug
function pugFuncs() {
  return gulp.src([`./SRC_FOLDER/**/*.pug`, `!./SRC_FOLDER/**/_*.pug`])
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(pug(
         pretty: true
     }))
    .pipe(gulp.dest(paths.html));
}

const watchPugFiles = () =>
  gulp.watch(`./DIST_FOLDER/**/*.pug`, pugFuncs);

JAVASCRIPTコンパイル

gulpfile.js

const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
const babel = require('gulp-babel');
const rename = require('gulp-rename');

// javascript
function jsFuncs() {
  return gulp
    .src([
      `./SRC_FOLDER/lib/**/*.js`,
      `./SRC_FOLDER/vendor/**/*.js`,
      `./SRC_FOLDER/**/*.js`,
      `!./SRC_FOLDER/**/_*.js`
    ])
    .pipe(concat('main.js'))
    .pipe(babel({presets: ["@babel/preset-env"]}))
    .pipe(uglify())
    .pipe(rename('main.min.js'))
    .pipe(gulp.dest(paths.jsmin));
}

画像圧縮

gulpfile.js

const imagemin = require('gulp-imagemin');
const imageminPngquant = require('imagemin-pngquant');
const imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('imagemin', () => {
  return gulp
    .src(`./SRC_FOLDER/**/*.{png,jpg,gif,svg}`)
    .pipe(imagemin([
      imageminPngquant({ quality: [0.80, 0.85] }),
      imageminMozjpeg({ quality: 90 }),
      imagemin.gifsicle({
        interlaced: false,
        optimizationLevel: 1,
        colors: 256
      }),
      imagemin.mozjpeg(),
      imagemin.optipng(),
      imagemin.svgo({plugins:[{removeViewBox: false}]})
    ]))
    .pipe(gulp.dest(`./DIST_FOLDER/`));
});

FTPアップロード

gulpfile.js

const ftp = require('vinyl-ftp');

gulp.task('deploy', () => {
  const remoteDest = 'デプロイ先ディレクトリ';
  const globs = [
    'DIST_FOLDER/**',
    '!DIST_FOLDER/**/*.DS_Store'
  ];
  const conn = ftp.create({
    host: 'ホスト名',
    user: 'ユーザ名',
    password: 'パスワード',
  });
  return gulp
    .src(globs, {buffer: false, dot: true})
    .pipe(conn.newerOrDifferentSize(remoteDest))
    .pipe(conn.dest(remoteDest));
});

最後に監視して終わり

gulpfile.js

const watchSassFiles = () =>
  gulp.watch(`./SRC_FOLDER/**/*.scss`, sassFuncs);

const watchJsFiles = () =>
  gulp.watch(`./SRC_FOLDER/**/*.js`, jsFuncs);

const watchPugFiles = () =>
  gulp.watch(`./SRC_FOLDER/**/*.pug`, pugFuncs);
exports.default = gulp.series(
  gulp.parallel(watchPugFiles, watchSassFiles, watchJsFiles)
);