Как я могу загрузить изображения в приложение Reaction-Gulp? - PullRequest
Новая
       12

Как я могу загрузить изображения в приложение Reaction-Gulp?

0 голосов
/ 15 февраля 2020

Я использую React и Gulp вместе и у меня возникли некоторые проблемы при попытке загрузить png. Всякий раз, когда я пытаюсь использовать один, я получаю: 

Uncaught /Users/dylan/Desktop/dev/project/build/renderer/images/add.png:1
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { �PNG

И журналы ошибок просто указывают на кучу машинного кода.

Я собираюсь поставить мой gulpfile.js ниже. Как загрузить это изображение без ошибок?

gulpfile.js

const { task, series, gulp, src, dest, start } = require('gulp');
const rimraf = require('rimraf');

const scripts = require('./tasks/scripts');
const assets = require('./tasks/assets');
const images = require('./tasks/images');
const watch = require('./tasks/watch');
const dist = require('./tasks/distribution');

task('clean', function(done) {
  rimraf('./build', done);
});
task('build', series('clean', assets.copyHtml, images.buildImgs, scripts.build));
task('develop', series('clean', watch.start));
task('pack-win', series('build', dist.packWin));
task('pack-linux', series('build', dist.packLinux));
task('pack-mac', series('build', dist.packMac));

watch.js

const { parallel, series, watch } = require('gulp');
const electron = require('./electron');
const hotreload = require('./hotreload');
const assets = require('./assets');
const scripts = require('./scripts');
const images = require('./images');

function watchMainScripts() {
  return watch(['app/main/**/*.js'], series(scripts.developBuild, electron.stop, electron.start));
}

function watchRendererScripts() {
  return watch(['app/renderer/**/*.js'], series(scripts.developBuild, hotreload.reload));
}

function watchHtml() {
  return watch(
    ['app/renderer/index.html'],
    series(assets.copyHtml, hotreload.inject, hotreload.reload),
  );
}

function watchImages(){
  return watch(
    ['app/renderer/images/*.png'],
    series(images.buildImgs)
  );
}

watchMainScripts.displayName = 'watch-main-scripts';
watchRendererScripts.displayName = 'watch-renderer-scripts';
watchHtml.displayName = 'watch-html';
watchImages.displayName = 'watch-images';

exports.start = series(
  assets.copyHtml,
  images.buildImgs,
  scripts.developBuild,
  hotreload.start,
  electron.start,
  parallel(watchMainScripts, watchRendererScripts, watchHtml, watchImages),
);

image.js

const { src, dest, watch } = require('gulp');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const inject = require('gulp-inject-string');

function buildImgs() {
  return src('app/renderer/images/*.png')
    .pipe(dest('build/renderer/images'));
}

buildImgs.displayName = 'build-images';

exports.buildImgs = buildImgs;

Я делаю что-то неправильно? Кажется, изображения загружаются в нужный файл, но не загружаются в мои компоненты.

...