react-hot-loader в Gulp

267
22 марта 2017, 17:57

Добрый день! Стоит задача писать проект на ReactJS в Gulp. Пытаюсь найти хоть какую нибудь информацию по hot load для Gulp и пока ничего не нашел. Кто может подсказать где по читать или дать конфиги?

Answer 1

В gulp нет react-hot-loader. Думаю, большинство вам скажет, что лучше использовать только webpack для сборки проектов с реактом. Но, если вам все-таки хочется gulp, то можно сделать так: замените ваш таск для сборки js на таск, запускающий webpack, потом вам понадобится webpack-dev-server для организации быстрой перезагрузки и webpack-hot-middleware для запоминания текущего стейтов, а то после каждой быстрой перезагрузки вы будите проваливаться в начальный стейт и долго кликать до нужного состояния. У меня это выглядит примерно так:

gulpfile.js

gulp.task('js', function() {
  return gulp.src(webpackConfig.entry)
    .pipe($.webpack(webpackConfig))
    .pipe(isProduction ? $.uglify() : $.util.noop())
    .pipe(gulp.dest(path.build.js))
    .pipe($.size({ title : 'js' }));
});
gulp.task("webpack-dev-server", function(callback) {
  var compiler = webpack(webpackConfig);
  var myConfig = Object.create(webpackConfig);
  myConfig.devtool = "eval";
  myConfig.debug = true;
  var app = new WebpackDevServer(webpack(myConfig), {
    publicPath: "/",
    contentBase: "./build",
    historyApiFallback: true,
    stats: {
      colors: true
    }
  });
  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
  }));
  app.use(require('webpack-hot-middleware')(compiler));
  app.listen(port, "localhost", function(err) {
    if(err) throw new gutil.PluginError("webpack-dev-server", err);
    gutil.log("[webpack-dev-server]", "http://localhost:" + port +  "/build/");
  });
});

Webpack занимается исключительно js, а все остальное обрабатывает и собирает gulp.

READ ALSO
Как отловить нажатие по кнопке: буквы, цифры, знаки препинания на любой раскладке

Как отловить нажатие по кнопке: буквы, цифры, знаки препинания на любой раскладке

Как обработать событие нажатия по кнопке, только если нажата буква или цифра, или знак препинания, при нажатии на русской или английской раскладке?

218
Определить выбранный option и запуск функции

Определить выбранный option и запуск функции

Как определить выбранный option по id и запустить привязанную к нему функцию? Может быть, можно вообще что-то наподобие onclick?

260
Как стилизовать select и в нем скролл?

Как стилизовать select и в нем скролл?

Вот такая у меня форма в макете http://joxiru/J2b5xvLs91Rgm6 нашел плагин для select, а вот как внутри него сделать красивый скролл, не знаю, буду благодарен...

287