2017-11-18 511 views
1

我有我的客户端代码反应本机即.jsx文件,我用gulp来编译它们。我想转换我的项目,开始使用打字稿,但一次1个文件。这意味着我需要能够使用gulp来编译jsx和ts。如何配置gulp来编译.jsx和.ts文件?

我使用的是下面一饮而尽 -

/// <binding AfterBuild='default' /> 
"use strict"; 

var gulp = require("gulp"), 
    concat = require("gulp-concat"), 
    cssmin = require("gulp-cssmin"), 
    merge = require("merge-stream"), 
    del = require("del"), 
    bundleconfig = require("./bundleconfig.json"), 
    runSequence = require('run-sequence'); 

var runSequence = require('run-sequence'); 

var sass = require('gulp-sass'); 

var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

var webroot = "./wwwroot/"; 
var paths = { 
    scss: webroot + "sass/**/*.scss", 
    scssDest: webroot + "css/" 
}; 

// 1. react 
gulp.task('react', function() { 
    return browserify({ entries: './wwwroot/clientapp/root', extensions: [ '.jsx', '.js'], debug: true }) 
     .transform('babelify', { presets: ['es2015', 'react'] }) 
     .bundle() 
     .pipe(source('index.js')) 
     .pipe(gulp.dest('./wwwroot/')); 
}); 

// 2. sass 
gulp.task('compile:sass', function() { 
    gulp.src(paths.scss) 
     .pipe(sass()) 
     .pipe(gulp.dest(paths.scssDest)); 
}); 
gulp.task("sass", ["compile:sass"]); 

// minify sass output 
function getBundles(regexPattern) { 
    return bundleconfig.filter(function (bundle) { 
     return regexPattern.test(bundle.outputFileName); 
    }); 
} 
gulp.task("css", function() { 
    var tasks = getBundles(/\.css$/).map(function (bundle) { 
     return gulp.src(bundle.inputFiles, { base: "." }) 
      .pipe(concat(bundle.outputFileName)) 
      .pipe(cssmin()) 
      .pipe(gulp.dest(".")); 
    }); 
    return merge(tasks); 
}); 

gulp.task("clean", function() { 
    return del(['wwwroot/css/*', 'wwwroot/index.js']); 
}); 

gulp.task("default", function (cb) { 
    runSequence(
     ['clean', 'sass'], 
     ['react'], 
     ['css'], 
     cb); 
}); 

我会怎样的变化做我一口配置,以确保两个.jsx和.ts文件工作和编译。

回答

0

添加.ts扩展以反应任务。根据你的代码,你将不得不babelify配置与TS工作以及

gulp.task('react', function() { 
    return browserify({ entries: './wwwroot/clientapp/root', extensions: [ '.jsx', '.js', '.ts'], debug: true }) 
     .transform('babelify', { presets: ['es2015', 'react'], extensions: [ '.jsx', '.js', '.ts'] }) 
     .bundle() 
     .pipe(source('index.js')) 
     .pipe(gulp.dest('./wwwroot/')); 
}); 

你可以尝试无需添加扩展babelify,但我不认为它会工作。

希望有帮助!