gulp4.0に対応したgulpfile.jsの書き方はたった一箇所を変更するだけでOK！

gulpのバージョンが4.0となってから、これまでのコードではgulpは正常に動かなくなってしまいました。
色々と調べてみると、どうやらタスクは非同期ではなくて並列で実行される仕様に変更になったようです。

さらに大きな変更点は、gulp.taskの引数、gulp.watchの引数が変更になったこと。

[blogcard url=”https://satoyan419.com/gulp-v4/”]

その影響もあり、今までどおりの書き方ではgulpが正常に動作することができません。

これ、けっこうハマってしまい困ってる方多いみたいですね・・・

gulp4.0にアップデートしたけど、急に使えなくなってしまってどうしようみたいな書き込みをわりとみかけました。
自分も3.9のまま頑張ろうか4.0にアップデートしようか迷いましたが、いとも簡単に対処できたので、その方法をご紹介します！

gulp4.0を使用する前提としては、gulp本体の他にもnode.jsやプラグインも全て最新バージョン（もしくは安定版）までアップデートしておいたほうがいいですよ！

gulp4.0に対応したgulpfile.jsの書き方

答えからいきますと、たった一箇所を直すだけでgulp4.0に対応することができます。

以下はgulp3.9の場合。

gulp3.9で記述していたgulpfile.js

var gulp = require('gulp');
var cache  = require('gulp-cached'); //変更のあったもの(scss)
var plumber = require('gulp-plumber'); //watch中にエラー防止
var csscomb = require('gulp-csscomb'); //cssプロパティ順序
var sass = require('gulp-sass');//cssコンパイル
var autoprefixer = require('gulp-autoprefixer');//ベンダープレフィックス
var gcmq = require('gulp-group-css-media-queries'); //CSSメディアクエリー整理
var notify  = require('gulp-notify'); //エラーを通知
var imageOptim = require('gulp-imageoptim');
var changed  = require('gulp-changed'); //変更のあったもの(画像)


/// cssコンパイル ////////////////////////////////////////////
gulp.task('sass', function() {
	return gulp.src('scss/*scss')
        .pipe(cache('sass'))
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        .pipe(csscomb())
        .pipe(sass({
            outputStyle: 'compact'
        }))
        .pipe(gcmq())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))

        .pipe(gulp.dest('./css'))
        .pipe(notify({
            title: 'Sassをコンパイルしました。',
            message: new Date(),
            sound: 'Tink',
            icon: '/Users/karima-ryo/docker/taskrun/gulplogo.jpg'
        }));
});


/// 画像圧縮 ////////////////////////////////////////////
//差分監視画像フォルダ
var pathsIMG = {
    srcDir : 'img/',
    dstDir : 'img/dest'
  }
  
gulp.task('images', function() {
    var srcGlob = pathsIMG.srcDir + '*.+(jpg|jpeg|png|gif|svg)';
    var dstGlob = pathsIMG.dstDir;

    return gulp.src( srcGlob )
        .pipe(changed( dstGlob ))
        .pipe(imagemin( imageminOptions ))
        .pipe(gulp.dest( dstGlob ))
        .pipe(notify({
            title: '画像を圧縮しました。',
            message: new Date(),
            sound: 'Tink',
            icon: '/Users/karima-ryo/docker/taskrun/gulplogo.jpg'
        }));
});




/// 監視フォルダ ////////////////////////////////////////////
gulp.task('watch', function(){
  gulp.watch('scss/*.scss', ['sass']);
  gulp.watch('img/*.+(jpg|jpeg|png|gif|svg)', ['images']);
});

/// Gulpコマンドで動かすもの ////////////////////////////////////////////
gulp.task('default', ['watch']);

そして、次はgulp4.0の場合。

gulp4.0で記述するgulpfile.js

var gulp = require('gulp');
var cache  = require('gulp-cached'); //変更のあったもの(scss)
var plumber = require('gulp-plumber'); //watch中にエラー防止
var csscomb = require('gulp-csscomb'); //cssプロパティ順序
var sass = require('gulp-sass');//cssコンパイル
var autoprefixer = require('gulp-autoprefixer');//ベンダープレフィックス
var gcmq = require('gulp-group-css-media-queries'); //CSSメディアクエリー整理
var notify  = require('gulp-notify'); //エラーを通知
var imageOptim = require('gulp-imageoptim');
var changed  = require('gulp-changed'); //変更のあったもの(画像)


/// cssコンパイル ////////////////////////////////////////////
gulp.task('sass', function() {
	return gulp.src('scss/*scss')
        .pipe(cache('sass'))
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        .pipe(csscomb())
        .pipe(sass({
            outputStyle: 'compact'
        }))
        .pipe(gcmq())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))

        .pipe(gulp.dest('./css'))
        .pipe(notify({
            title: 'Sassをコンパイルしました。',
            message: new Date(),
            sound: 'Tink',
            icon: '/Users/karima-ryo/docker/taskrun/gulplogo.jpg'
        }));
});


/// 画像圧縮 ////////////////////////////////////////////
//差分監視画像フォルダ
var pathsIMG = {
    srcDir : 'img/',
    dstDir : 'img/dest'
  }
  
gulp.task('images', function() {
    var srcGlob = pathsIMG.srcDir + '*.+(jpg|jpeg|png|gif|svg)';
    var dstGlob = pathsIMG.dstDir;

    return gulp.src( srcGlob )
        .pipe(changed( dstGlob ))
        .pipe(imagemin( imageminOptions ))
        .pipe(gulp.dest( dstGlob ))
        .pipe(notify({
            title: '画像を圧縮しました。',
            message: new Date(),
            sound: 'Tink',
            icon: '/Users/karima-ryo/docker/taskrun/gulplogo.jpg'
        }));
});




/// 監視フォルダ ////////////////////////////////////////////
gulp.task('watch', function(){
  gulp.watch('scss/*.scss', gulp.task('sass'));
  gulp.watch('img/*.+(jpg|jpeg|png|gif|svg)', gulp.task('images'));
});
/// Gulpコマンドで動かすもの ////////////////////////////////////////////
gulp.task('default', gulp.task('watch'));

違いはたった一箇所、

gulp.watch(‘scss/*.scss’, [‘sass’]);

青い部分を
→

gulp.watch(‘scss/*.scss’, gulp.task(‘sass’));

赤い部分のように書き換えただけです。

はい、本当にそれだけです。

私の場合は、3箇所ありましたので3箇所書き換えました。

色々と小難しいネット文献も多いですが、既存のgulpfile.jsを活かして使いたい場合は、この方法をお試しください。

これで一安心😄