gulpタスクでビルド時にjsファイルが出力される前に終了してしまう。

Question

uglify-js と clean-css でminifiedするタスクをgulpで自動化するスクリプトを書こうとしています。

下記のスクリプトから、 build タスクを実行後、それぞれのタスクが実行されるところまでは正常に動いているようですが、 minify-js タスクが終了する前に build タスク自体が終了してしまいます。

const gulp        = require('gulp');
const sass        = require('gulp-sass');
const plumber     = require('gulp-plumber');
const sourcemaps  = require('gulp-sourcemaps');
const browserSync = require('browser-sync');
const uglify      = require('gulp-uglify');
const cleanCSS    = require('gulp-clean-css');
const concat      = require('gulp-concat');
const babel       = require('gulp-babel');

gulp.task('sass', function(){
    return gulp.src('./src/style/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/css/'));
});

// ブラウザリロード
gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "./dist",
             index  : "index.html"
        }
    });
});
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//JS圧縮
gulp.task('minify-js', function() {
    return gulp.src([
        "./node_modules/jquery/dist/jquery.js",
        "./node_modules/jquery.mousewheel/jquery.mousewheel.js",
        "./node_modules/autosize/dist/autosize.js",
        "./node_modules/cryptico/lib/cryptico.js",
        "./node_modules/twemoji/2/twemoji.js",
        "./src/javascript/main.js",
        "./src/javascript/mode_global.js",
        "./src/javascript/mode_config.js",
        "./src/javascript/mode_instance.js",
        ])
        .pipe(sourcemaps.init())
        .pipe(babel({ presets: ['es2015'] }))
        //.pipe(babel())
        .pipe(uglify()
            .on('error', function(e){
                console.log(e);
            })
        )
        .pipe(concat('app.min.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/js'));
});

//CSS圧縮
gulp.task('minify-css', function() {
    return gulp.src("./dist/css/*.css")
        .pipe(sourcemaps.init())
        .pipe(cleanCSS())
        .pipe(concat('style.min.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/css')); // overwrite
});

// watchタスク(html,js,sassファイル変更時に実行するタスク)
gulp.task('sass-watch', ['sass','browser-sync'], function(){
    let watcher = gulp.watch('./src/style/*.scss', ['sass']);
    gulp.watch("./*.html",['bs-reload']);
    watcher.on('change', function(event) {
        console.log('コンパイルOK!');
    });
    gulp.watch("./src/style/*.scss",['bs-reload']);
    gulp.watch("./src/javascript/*.js",['bs-reload']);
});

gulp.task('default', ['sass-watch','browser-sync']);
gulp.task('build',['minify-css','minify-js']);

タスク実行時のログは以下の通りです。

minify-cssタスクは完了していますが、minify-jsタスクおよび親タスクであるbuildも完了メッセージが表示されません。

$ npx gulp build
[16:07:16] Using gulpfile ~/repository/project/gulpfile.js
[16:07:16] Starting 'minify-css'...
[16:07:16] Starting 'minify-js'...
[16:07:19] Finished 'minify-css' after 3.22 s
$

上記タスク実行後、 ./dist/css にminifiedされたcssとソースマップは出力されますが、 ./dist/js にjsファイルが出力されません。

解決方法をご存知でしたら、ご教示の程、宜しくお願いします。

Answer 1

自己解決しました。

やはりpresetの指定方法が間違えていたようでした。

@gulp/preset-env を導入してプリセットに @gulp/env を指定することで正しく出力されました。

中途半端に古い記事を参考にしたのが悪かったようです。ありがとうございました。

Answer 2

いろいろ試してみたところ、どうもbabelでes2015をプリセットに指定していると発生する症状だということがわかりました。

しかしES6以降のコードも含まれるためこの記述を省くことはできません。更に調べてみることにします。