如何使 Gulp 任务将项目的每个 jsx 文件转换为不同的.js文件

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

本文关键字：文件 转换 js jsx Gulp 何使 任务 项目      更新时间：2023-09-26

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

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

如果你使用 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'))
})

这是我的 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"]);
相关文章：