我一直在努力将 grunt 任务转换为 gulp。grunt 文件如下所示：
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
client: {
src: ['react/**/*.jsx'],
dest: 'public/js/browserify/bundle.js'
}
}
我看到了很多 browserify 和 gulp 的例子，但它们都只有一个文件起点。为了解决这个问题，我尝试使用 glob。在几次错误的开始后，我想出了以下内容。它运行没有错误，并创建了一个单独的 bundle.js 文件，但 reactify 似乎无法正常工作，因为 jsx 似乎没有被转换，所以我最终得到了错误：
未捕获的错误：找不到模块“./components/NoteApp.jsx”
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var reactify = require('reactify');
gulp.task('browserify', function (cb) {
glob('./react/**/*.jsx', {}, function (err, files) {
var b = browserify();
files.forEach(function (file) {
b.add(file);
});
b.transform(reactify);
b.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/js/browserify/'));
cb();
});
});
ddprrt要求提供有关结构的更多详细信息，因此这里是 react 文件夹的布局方式。代码取自这篇文章，它使用这个github zip 源来演示反应和回流。该项目非常接近我作为起点所需要的，但使用 Grunt 而不是 Gulp。
react 文件夹的结构如下：
react\App.jsx\Bootstrap.jsx\components\NoteApp.jsx\NoteCreationBox.jsx\Note.jsx\NoteListBox.jsx\NoteList.jsx\TextArea.jsx
错误来自 App.jsx 文件中的一行：
var React = require('react');
var NoteApp=require('./components/NoteApp.jsx');
但是更改此行会导致 gulp 通话失败并出现丢失文件错误。