How to make a Gulp task to transform each jsx file of a project into different .js file?

Question

I have some React files (.jsx) in my projet, and I need to have each one of them converted into different .js file (following the same directory structure) using a Gulp task.

So, just to clarify, I don't want to use something like Browserify.boudle() since it would leave me with a single converted .js file.

Answer 1

If you use gulp-react, it will rename them to .js automatically as well as 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

Here's my Gulpfile:

It uses gulp-babel, which can be a replacement for 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"]);