如何做一个Gulp任务来将每个项目的jsx文件转换成不同的.js文件？

我在我的projet中有一些React文件（.jsx），我需要使用Gulp任务将它们中的每一个转换成不同的.js文件（遵循相同的目录结构）。

所以，为了澄清，我不想使用像Browserify.boudle（）这样的东西，因为它会让我有一个转换后的.js文件。

Answer 1

如果你使用gulp-react ，它会自动将它们重命名为.js ，同时也将它们转换为：

 var gulp = require('gulp') var react = require('gulp-react') gulp.task('transpile-js', function() { return gulp.src('./src/**/*.jsx') .pipe(react({harmony: true})) .pipe(gulp.dest('./lib')) }) 

Answer 2

这是我的Gulpfile：

它使用gulp-babel ，可以代替gulp-react 。

gulpfile.js

 /// <binding BeforeBuild='minify' Clean='clean' /> "use strict"; var gulp = require("gulp"), del = require("del"), cssmin = require("gulp-cssmin"), uglify = require("gulp-uglify"), babel = require("gulp-babel"), debug = require("gulp-debug"), rename = require("gulp-rename"); var paths = { wwwroot: "./wwwroot/" }; paths.css = paths.wwwroot + "css/site/**/*.css"; paths.minCss = paths.wwwroot + "css/site/**/*.min.css"; paths.js = paths.wwwroot + "js/site/**/*.js"; paths.minJs = paths.wwwroot + "js/site/**/*.min.js"; paths.babelJsx = paths.wwwroot + "jsx/**/*.jsx"; paths.babelJs = paths.wwwroot + "jsx/**/*.js"; paths.babelMinJs = paths.wwwroot + "jsx/**/*.min.js"; gulp.task("clean-js", function (cb) { return del([ paths.minJs ]); }); gulp.task("clean-jsx-js", function (cb) { return del([ paths.babelJs ]); }); gulp.task("clean-jsx-minjs", function (cb) { return del([ paths.babelMinJs ]); }); gulp.task("clean-jsx", ["clean-jsx-js", "clean-jsx-minjs"]); gulp.task("clean-css", function (cb) { return del([ paths.minCss ]); }); gulp.task("clean", ["clean-js", "clean-jsx", "clean-css"]); gulp.task("transpile", function () { return gulp.src([paths.babelJsx], { base: "." }) .pipe(debug({ title: 'babel:' })) .pipe(babel({ presets: ["es2015", "react"] })) .pipe(gulp.dest(".")) .pipe(debug({ title: 'babel:' })); }); gulp.task("minify-js", function () { return gulp.src([paths.js, "!" + paths.minJs], { base: "." }) .pipe(debug({ title: 'minify-js:' })) .pipe(uglify()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest(".")) .pipe(debug({ title: 'minify-js:' })); }); gulp.task("minify-jsx", ["transpile"], function () { return gulp.src([paths.babelJs, "!" + paths.babelMinJs], { base: "." }) .pipe(debug({ title: 'minify-jsx-' })) .pipe(uglify()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest(".")) .pipe(debug({ title: 'minify-jsx-' })); }); gulp.task("minify-css", function () { return gulp.src([paths.css, "!" + paths.minCss], { base: "." }) .pipe(debug({ title: 'minify-css:' })) .pipe(cssmin()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest(".")) .pipe(debug({ title: 'minify-css:' })); }); gulp.task("minify", ["transpile", "minify-js", "minify-jsx", "minify-css"]);