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

Question

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

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

Answer 1

如果使用gulp-react，它便会自动将其重命名为.js以及transpiling：

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"]);