0

babelのトランスパイルがうまくいきません。

反応しなくなったり、止まらなくなったりします。

gulp-plumberの影響でしょうか?

・下記がまれにガーとずっとで続けて止まらなくなることがあります。

[20:36:37] Finished 'babeltrance' after 2.01 ms
[20:36:37] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.42 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 3.24 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.7 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 4.09 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 6.89 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.53 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.31 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 6.08 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.6 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.29 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 7.29 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.55 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.64 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 5.67 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.62 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.22 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 6.08 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.52 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.32 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 3.24 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.67 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 4.89 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 6.08 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.62 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.35 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 3.24 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.67 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.29 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 6.89 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.62 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.4 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 3.65 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.6 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.48 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 6.48 μs
[20:36:38] Starting 'babeltrance'...
[20:36:38] Finished 'babeltrance' after 1.54 ms
[20:36:38] Starting 'babelwatch'...
[20:36:38] Finished 'babelwatch' after 3.45 ms
[20:36:38] Starting 'babel'...
[20:36:38] Finished 'babel' after 4.05 μs

・gulp.js

var gulp = require('gulp');              //gulpをインポート
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss');   //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var csswring = require('csswring');
var babel = require("gulp-babel");
var browserSync = require('browser-sync').create();
var csscomb = require('gulp-csscomb'); //css整形
var plumber = require('gulp-plumber');



gulp.task('babeltrance', function() {
  gulp.src('dest-after/js/babel/*')
    .pipe(plumber())
    .pipe(babel({
      presets: ['es2015'],
    }))
    .pipe(gulp.dest('dest-after/js'))
});

gulp.task('babelwatch', function() {
  gulp.watch('dest-after/js/babel/*', ['babel'])
});   

gulp.task('babel', ['babeltrance', 'babelwatch']);




const plugins = [
    require('postcss-import'),
    require('postcss-cssnext')({
      browsers: [
        'last 2 version',
        'iOS >= 8.1',
        'Android >= 4.4',
      ],
    }), //ソースではわからないが、IE9以上は、remが使えるので、remからpxを生成されないように、こちらで行っている
    require('csswring')
];


 gulp.task("css", function(){ //return gulp.srcのreturnは上から順番に処理するという意味
    gulp.src('./src-before/**/*.css')
        .pipe(plumber())
        .pipe(postcss(plugins))//PostCSSにファイルを処理してもらう。pluginsは変数
        .pipe(gulp.dest('./dest-after/css'));//生成されたCSSの排出先。dest-after/cssの中に配置
});

gulp.task('watch', function(){
    gulp.watch(['dest-after/index.html', 'dest-after/js/*', 'src-before/**/*' , 'src-before/**/**/*'], ["css"]);
});
// ブラウザシンク
  //ローカルサーバーを立て、
  //ファイル更新時に自動リロードするタスクです
  gulp.task("server", function () {
        //初期設定です
        gulp.task("server", function () {
    browserSync.init({
        server: {
            baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。
        },
        files: [
            "dest-after/index.html",
            "dest-after/js/*.js",
            "dest-after/app.css",
        ]
    });
});
        // browserSync.init({
        //     server: {
        //     baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。
        //     }
        // });

  gulp.watch (['dest-after/index.html', 'dest-after/js/*', 'src-before/**/**/*'], browserSync.reload);
}); // 左で指定したファイルに変更があったら下記のブラウザシンクを更新するように指定する。


gulp.task("default", ["watch", "server"]);
// /ブラウザシンク


gulp.task('comb', function () {
  return gulp.src('./src-before/**/*.css')
    .pipe(csscomb()) // gulp-csscombで整形してあげて、
    .pipe(gulp.dest('./dest-after/comb'));//生成されたCSSの排出先。dest-after/cssの中に配置
});

・まれに下記のメッセージも出ます。

(node:3960) Warning: Possible EventEmitter memory leak detected. 11 change listeners added. Use emitter.setMaxListeners() to increase limit

http://qiita.com/berlysia/items/f77fb6ed703589770be8
を見ても難しくてわかりません。

下記でよろしいでしょうか?

gulp.task('babeltrance', function() {
  gulp.src('dest-after/js/babel/*')
    .pipe(plumber())
    .pipe(babel({
      presets: ['es2015'],
    }))
    .pipe(gulp.dest('dest-after/js'))
});

gulp.task('babelwatch', function() {
  gulp.watch('dest-after/js/babel/*', ['babeltrance'])
});   

gulp.task('babel', ['babeltrance', 'babelwatch']);

根本的な部分がわからず、そのあたりを教えてもらえませんか?
そうすれば今後もっと自分で解決ができます。

まずwatchとは一度実行を指定すればその後は何度も再実行しなくても、
止めるまではずっと監視し続けてくれるので、下記のようにループさせる必要性はなかったということなのですね。

gulp.task('babelwatch', function() {
  gulp.watch('dest-after/js/babel/*', ['babelwatch'ないしは'babel'])
});   

gulp.task('babel', ['babelwatch']);

むしろこのループのせいでおかしい動きになっていたということですね。

Warning: Possible EventEmitter memory leak detected.
はgulpwatchが11以上立ち上がることによって、同じタスクを11以上は立ち上げられませんと出ているのですね。

1
  • ところで今回は偶然気づきましたが、質問を編集しても回答者には通知されません。通知が必要であれば回答へのコメント等を使う必要があります。
    – unarist
    Commented 2017年1月10日 1:57

1 件の回答 1

4

ログからは、babel babeltrance babelwatch の3つのタスクが繰り返し実行されていることが読み取れます。これらのタスクを見てみましょう。

gulp.task('babeltrance', function() {
  gulp.src('dest-after/js/babel/*')
    .pipe(plumber())
    .pipe(babel({
      presets: ['es2015'],
    }))
    .pipe(gulp.dest('dest-after/js'))
});

gulp.task('babelwatch', function() {
  gulp.watch('dest-after/js/babel/*', ['babel'])
});   

gulp.task('babel', ['babeltrance', 'babelwatch']);

それぞれのタスクは次の処理を行っていることがわかります。

  • babel: babeltrance と babelwatch を実行する
  • babeltrance: Babel による処理を行う
  • babelwatch: ファイルの監視を開始し、更新されたら babel を実行する

つまり…ファイルが更新されるたびに babel タスクが呼ばれ、その中で babelwatch タスクが呼ばれ、そのたびに追加で監視を始めています。その後ファイルが更新されれば、監視している数だけ babel タスクが呼び出され、さらに監視が増え…。

ファイルが更新されるたびに、ファイル更新時に babel タスクを実行する回数が増えています

ファイル更新時に実行したいのは babel タスクではなく、 babeltrance タスクなのではありませんか?

Warning: Possible EventEmitter memory leak detected.

これは同じ対象に対して多数の監視を行っていることによるものです。意図したものであれば maxListeners オプションによって閾値を変更することもできますが、今回は違いますね。


gulp.watch()監視対象.on('change', タスク呼び出し) という感じでイベントリスナーを登録します。jQueryの .on() メソッドと同様、一度登録すれば十分ですよね。

Warningメッセージですが、 11 change listeners added. と書かれています。つまり、あるオブジェクトの change イベントに11個もリスナーが登録されているけど、もしかして登録解除し忘れたり(→メモリリークにつながる)していませんか?というメッセージです。

先ほど書いたように gulp.watch() は監視対象の change イベントにリスナーを登録します。同じ対象に繰り返し gulp.watch() を行えば、それだけリスナーも登録されます。で、11個に達したところで Warning が表示されるわけです。

1
  • ありがとうございます。 まずwatchとは一度実行を指定すればその後は何度も再実行しなくても、 止めるまではずっと監視し続けてくれるので、下記のようにループさせる必要性はないという認識でよろしいのですね。 >>> Warning: Possible EventEmitter memory leak detected. はgulpwatchが11以上立ち上がることによって、同じタスクを11以上は立ち上げられませんと出ているのですね。 gulpwatchのタスクが11個たまってエラーが出ていたのですね。
    – web
    Commented 2017年1月10日 3:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。