吞咽建设失败与隐秘环境

Question

我最近已经开始学习react，并且我得到了这个神秘的异常在一个吞咽的构建。

这个项目最初是用react反流生成器创建的。

[18:35:03] gulp-rev-all: Finding references in [ /404.html ]
[18:35:03] gulp-rev-all: Not renaming [ /404.html ] due to filter rules.
[18:35:03] gulp-rev-all: Finding references in [ /styles/main.css ]

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOENT, no such file or directory '{/Users/Shared/java/projects/react/msa/react-project/.tmp/react.js,/Users/Shared/java/projects/react/msa/react-project/app/react.js}'
    at Object.fs.openSync (fs.js:439:18)
    at Object.fs.readFileSync (fs.js:290:15)
    at DestroyableTransform.<anonymous> (/Users/Shared/java/projects/react/msa/react-project/node_modules/gulp-useref/index.js:81:61)
    at Array.forEach (native)
    at DestroyableTransform.<anonymous> (/Users/Shared/java/projects/react/msa/react-project/node_modules/gulp-useref/index.js:70:35)
    at Array.forEach (native)
    at DestroyableTransform.<anonymous> (/Users/Shared/java/projects/react/msa/react-project/node_modules/gulp-useref/index.js:46:36)
    at Array.forEach (native)
    at DestroyableTransform._transform (/Users/Shared/java/projects/react/msa/react-project/node_modules/gulp-useref/index.js:43:15)
    at DestroyableTransform.Transform._read (/Users/Shared/java/projects/react/msa/react-project/node_modules/gulp-useref/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)

我的文件是这样的

var gulp        = require('gulp');

var $           = require('gulp-load-plugins')();
var del         = require('del');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var runSequence = require('run-sequence');
var less        = require('gulp-less');

var env = 'dev';

gulp.task('clean:dev', function() {
  return del(['.tmp']);
});

gulp.task('clean:dist', function() {
  return del(['dist']);
});

gulp.task('scripts', function() {
  var bundler = browserify('./app/scripts/app.js', {
    extensions: ['.jsx'],
    debug: env == 'dev'
  }).transform('reactify');

  return bundler.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('.tmp/scripts'));
});


gulp.task('imagemin', function() {
  return gulp.src('app/images/*')
    .pipe($.imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}]
    }))
    .pipe(gulp.dest('dist/images'));
});

gulp.task('copy', function() {
  return gulp.src(['app/*.txt', 'app/*.ico'])
    .pipe(gulp.dest('dist'));
})

gulp.task('bundle', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  var jsFilter = $.filter(['**/*.js']);
  var cssFilter = $.filter(['**/*.css']);
  var htmlFilter = $.filter(['**/*.html']);
  var lessFilter = $.filter(['**/*.less']);

  return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe(jsFilter)
    .pipe($.uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.autoprefixer({
      browsers: ['last 5 versions']
    }))
    .pipe($.minifyCss())
    .pipe(cssFilter.restore())
    .pipe(lessFilter)
    .pipe(less())
    .pipe(lessFilter.restore())
    .pipe(htmlFilter)
    .pipe($.htmlmin({collapseWhitespace: true}))
    .pipe(htmlFilter.restore())
    .pipe($.revAll({ ignore: [/^\/favicon.ico$/g, '.html'] }))
    .pipe($.revReplace())
    .pipe(gulp.dest('dist'))
    .pipe($.size());
});

gulp.task('webserver', function() {
  return gulp.src(['.tmp', 'app'])
    .pipe($.webserver({
      host: '0.0.0.0', //change to 'localhost' to disable outside connections
      livereload: true,
      open: true
    }));
});

gulp.task('serve', function() {
  runSequence('clean:dev', ['scripts'], 'webserver');

  gulp.watch('app/*.html');

  gulp.watch('app/scripts/**/*.js', ['scripts']);

  gulp.watch('app/scripts/**/*.jsx', ['scripts']);

  gulp.watch('app/scripts/**/*.less', ['scripts']);

});

gulp.task('build', function() {
  env = 'prod';

  runSequence(['clean:dev', 'clean:dist'],
              ['scripts', 'imagemin', 'copy'],
              'bundle');
});

有什么想法吗？

Answer 1

看看它显示的错误：

Error: ENOENT, no such file or directory 
'{/.../react-project/.tmp/react.js,/...react-project/app/react.js}'

这个{path,otherpath}语法意味着它要在任何一个位置查找文件。

webserver任务告诉它在这些目录中查找要服务的资产：

gulp.task('webserver', function() {
  return gulp.src(['.tmp', 'app'])
    .pipe($.webserver({

所以问题并不在构建中，而是因为有东西在为react.js发出http请求。查看. .tmp/index.html或app/index.html，并在src中删除带有react.js的脚本标记。它包含在包中，不需要手动加载。确保有这样的脚本标记：

<script src="/scripts/app.js"></script>
</body>

这是路径，因为we服务器从.tmp提供服务，我们将包输出到..tmp/脚本，并使用以下行将其命名为app.js：

  return bundler.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('.tmp/scripts'));