Question

所以我们正在使用Gulp＆amp;将React/ES6 (Babel)代码转换为javascript。

我注意到，即使只进行了一些小改动，转换也需要30秒以上。例如，如果我要添加一个空格并保存它仍然需要30+secs让babel开始并且光洁度。

有谁知道为什么会这样？以下是我的gulp.js文件的一部分。

gulp.task('babel', function () {
  return browserify({
    entries: 'app/index.js',
    extensions: ['.js'],
    presets: ["es2015", "react"],
    debug: true,
    paths: ['app', 'app/layouts','app/components', 'node_modules']
  })
    .transform(babelify)
    .on('error', log_error)
    .bundle()
    .on('error', log_error)
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(path.app.dist));
});
gulp.task('watch', ['build'],  function() {
  gulp.watch(path.assets.src+'icons/*', ['icons', 'sass']);
  gulp.watch(path.styles.all, ['sass']);
  gulp.watch(path.styles.all, ['sass:styleguide']);
  gulp.watch(path.scripts.all, ['babel']);
  gulp.watch(path.templates.all, ['copy:html']);
});

我已尝试在watchify周围添加browseryify（参考此帖gulp browserify bundle time takes too long）但这没有任何改进。我在参考该帖子时所做的就是围绕浏览器＆amp;封装watchify( browserify({....}))。添加所需的缓存字段。

有时它可以接管1 min来构建！

Answer 1

你绝对应该将 watchify 与 broswerifiy 一起使用我认为它会加快增量构建的过程。

但无论如何都要尝试这个

gulp.task('babel', function () {
  return browserify({
    entries: 'app/index.js',
    extensions: ['.js'],
    presets: ["es2015", "react"],
    debug: true
    paths: ['app', 'app/layouts','app/components', 'node_modules']
  })
    .transform(babelify.configure({
        ignore: /(node_modules)/
    }))
    .on('error', log_error)
    .bundle()
    .on('error', log_error)
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(path.app.dist));
});
gulp.task('watch', ['build'],  function() {
  gulp.watch(path.assets.src+'icons/*', ['icons', 'sass']);
  gulp.watch(path.styles.all, ['sass']);
  gulp.watch(path.styles.all, ['sass:styleguide']);
  gulp.watch(path.scripts.all, ['babel']);
  gulp.watch(path.templates.all, ['copy:html']);
});

如果你正在使用凉亭，请添加 -

.transform(babelify.configure({
            ignore: /(bower_components)|(node_modules)/
        }))

Babel开始使用30秒以上与Gulp结束

1 个答案: