Question

我正在将我的项目从Grunt转换为Gulp，并且有多个输入jsx和输出js文件。我正在尝试编写一个[简单]任务，它可以将源正确地组合到单独的应用程序文件中。目录结构是这样的：

├── dist
│   └── js
│       ├── app1.js
│       └── app2.js
└── src
    ├── app1.jsx
    ├── app2.jsx
    └── components
        ├── Button.jsx
        ├── Dashboard.jsx
        ├── Item.jsx
        ├── List.jsx
        └── Widget.jsx

app1.jsx加载某些组件，app2.jsx加载不同的组件。例如：

app1.jsx

var Button = require('./components/Button');
var List = require('./components/List');
var Item = require('./components/Item');

// etc

app2.jsx

var Button = require('./components/Button');
var Dashboard = require('./components/Dashboard');
var Widget = require('./components/Widget');
var List = require('./components/List');

// etc ...

不同的应用程序文件将在不同的页面中使用，组件将在需要的应用程序之间共享。

因此，我们的想法是运行一个任务，该任务将运行不同应用程序文件的要求，并使用browserify编译输出并重新分区以分隔dist/js/以下的文件。我让它使用gulp-react来处理反应部分，但处理浏览器部分证明是棘手的 - 这是我的gulpfile.js：

var react = require('gulp-react');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var del = require('del');

var browserified = transform(function(filename) {
  var b = browserify();
  return b.bundle();
});

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

gulp.task('react', ['clean'], function() {
  return gulp.src(['src/*.jsx'])
  .pipe(react())
  .pipe(browserified)
  .pipe(gulp.dest('dist'));
});

这会生成dist/js/{app1,app2}.js，但它们只包含定义require(..)功能的JS代码，而不包含已重新生成的源。如果我删除.pipe(browserified)语句，则文件包含正确的已重新编码代码，但不加载和要求。

我很欣赏有关我做错的一些指示。感谢。

Answer 1

我认为问题出在你的路上：

gulp.task('react', ['clean'], function() {
  return gulp.src(['src/*.jsx']) // here!
  .pipe(react())
  .pipe(browserified)
  .pipe(gulp.dest('dist'));
});

您正在编译app1.jsx和app2.jsx，但不会编译components/*.jsx个文件。您可以使用globbing-patterns来修复它：

gulp.task('react', ['clean'], function() {
  return gulp.src(['src/**/*.jsx']) // here!
  .pipe(react())
  .pipe(browserified)
  .pipe(gulp.dest('dist'));
});

希望有所帮助：）

浏览并重新生成多个源文件和目标文件

app1.jsx

app2.jsx

1 个答案: