我在我的projet中有一些React文件(.jsx),我需要使用Gulp任務將它們中的每一個轉換爲不同的.js文件(遵循相同的目錄結構)。如何製作一個Gulp任務來將項目的每個jsx文件轉換爲不同的.js文件?
所以,只是爲了澄清,我不想使用像Browserify.boudle()這樣的東西,因爲它會讓我有一個轉換後的.js文件。
我在我的projet中有一些React文件(.jsx),我需要使用Gulp任務將它們中的每一個轉換爲不同的.js文件(遵循相同的目錄結構)。如何製作一個Gulp任務來將項目的每個jsx文件轉換爲不同的.js文件?
所以,只是爲了澄清,我不想使用像Browserify.boudle()這樣的東西,因爲它會讓我有一個轉換後的.js文件。
如果使用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'))
})
gulp-react現在已過時:( – 2016-06-29 17:40:14
這裏是我的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"]);
你嘗試過什麼?看起來'gulp-jsx'和'gulp-rename'會讓你得到你想要的,如果你只是想輸出一個擴展名爲.js的jsx轉換文件。 – 2015-01-09 18:50:24