質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.11%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 437

fort-space

score 5

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ファイルが出力されません。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

自己解決しました。

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る