gulp v4 に移行する時のgulpfile.jsの変更点

gulp v3で使用していたgulpfile.jsをv4に変更する機会があったので、その際の変更点をメモ。

設定内容

変更前のgulpfile.jsは以下のようになっています。

var gulp = require('gulp'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
pug = require('gulp-pug'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require("gulp-sass-glob");

/* Pug */
gulp.task('pug', function() {
  return gulp.src(['_src/pug/**/*.pug', '!_src/pug/**/_*.pug'])
    .pipe(plumber())
    .pipe(pug({
      pretty: true,
      basedir: './_src/pug'
    }))
    .pipe(gulp.dest('./'))
    .pipe(browserSync.reload({stream:true}));
});

/* Sass */
gulp.task('sass', function () {
  var plugins = [
    autoprefixer(),
  ];
  return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss'])
  .pipe(sassGlob())
  .pipe(sourcemaps.init())
  .pipe(plumber())
  .pipe(sass({
    outputStyle : 'compact'
  }))
  .pipe(postcss(plugins))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('assets/css/'))
  .pipe(browserSync.reload({stream:true}));
});

/* Browser-sync */
gulp.task('server', function() {
  browserSync({
    server: {
      baseDir: './',
    },
  });
});

/* Watch */
gulp.task('watch', function() {
  watch('_src/pug/**/*.pug', function(e) {
    gulp.start('pug');
  });
  watch('./_src/sass/**/*.scss', function(e) {
    gulp.start('sass');
  });
});

/* Default */
gulp.task('default', ['watch', 'server']);

この状態でv4にアップデートして、defaultのタスクを実行してみます。

npx gulp

以下のようなエラーが表示されました。

AssertionError [ERR_ASSERTION]: Task function must be specified

gulp.taskの引数の指定方法が変わっているようで、今回の場合defaultのタスクを以下のように変更しました。

gulp.task('default', ['watch', 'server']);

↓

gulp.task('default', gulp.parallel('watch', 'server'));

gulp.parallelは処理の実行を指定する(並列処理)もので、他にもgulp.series(直列処理)が使用できます。

これで先程のエラーは出なくなり、Browser-syncで起動までは実行できました。
ただ、PugファイルやSassファイルを変更した際に以下のようなエラーが表示されました。

UnhandledPromiseRejectionWarning: TypeError: gulp.start is not a function

gulp.startがv4で非推奨になったようで、代わりにgulp.seriesまたはgulp.parallelを使用する必要があるようです。
また、watch()もv4から変更が入っているようで、gulp-watchプラグインは使わなくてよさそうなので、使用しない形に変更してみます。

gulp.task('watch', function() {
  watch('_src/pug/**/*.pug', function(e) {
    gulp.start('pug');
  });
  watch('./_src/sass/**/*.scss', function(e) {
    gulp.start('sass');
  });
});

↓

gulp.task('watch', function() {
  gulp.watch('_src/pug/**/*.pug', gulp.task('pug'));
  gulp.watch('./_src/sass/**/*.scss', gulp.task('sass'));
});

これでwatchのタスクでもエラーが出なくなりました。

最終的に、gulpfile.jsの中身は以下のようになりました。

var gulp = require('gulp'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
pug = require('gulp-pug'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require("gulp-sass-glob");

/* Pug */
gulp.task('pug', function() {
  return gulp.src(['_src/pug/**/*.pug', '!_src/pug/**/_*.pug'])
    .pipe(plumber())
    .pipe(pug({
      pretty: true,
      basedir: './_src/pug'
    }))
    .pipe(gulp.dest('./'))
    .pipe(browserSync.reload({stream:true}));
});

/* Sass */
gulp.task('sass', function () {
  var plugins = [
    autoprefixer(),
  ];
  return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss'])
  .pipe(sassGlob())
  .pipe(sourcemaps.init())
  .pipe(plumber())
  .pipe(sass({
    outputStyle : 'compact'
  }))
  .pipe(postcss(plugins))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('assets/css/'))
  .pipe(browserSync.reload({stream:true}));
});

/* Browser-sync */
gulp.task('server', function() {
  browserSync({
    server: {
      baseDir: './',
    },
  });
});

/* Watch */
gulp.task('watch', function() {
  gulp.watch('_src/pug/**/*.pug', gulp.task('pug'));
  gulp.watch('./_src/sass/**/*.scss', gulp.task('sass'));
});

/* Default */
gulp.task('default', gulp.parallel('watch', 'server'));