31728


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

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

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

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

[code]

    [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
    
[/code]

・gulp.js

[code]

    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の中に配置
    });
    
[/code]

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

[code]

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

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

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

[code]

    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']);
    
[/code]

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

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

[code]

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

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

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


CC BY-SA 3.0
2017-01-09T08:51:34.473
31725
2017-01-10T01:47:03.930
2017-01-10T00:11:13.663
14320
14320
question
node.js gulp
gulpでbabelのタスクが繰り返し大量に実行されてしまう


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

[code]

    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']);
    
[/code]

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

  * 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 が表示されるわけです。


CC BY-SA 3.0
2017-01-09T12:37:00.480
31728
2017-01-10T01:47:03.930
2017-01-10T01:47:03.930
8000
8000
31725
answer