gulpでbabelのタスクが繰り返し大量に実行されてしまう
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以上は立ち上げられませんと出ているのですね。