如果你不熟悉gulp的操作，可以看下下面的教程：
對於gulp在react中的構建，找了很多資料，看了很多文章，也根據文章試驗了很多遍，但是就是不成功。很多文章其實都或多或少缺少一些步驟，而且還不給源文件參考，這對於新手來說就是大寫的懵逼。最后終於發現一篇文章可以實現，就轉載了。后面可以好好寫react了。
示例目錄結構如下：
- libs/
- react/
- node_modules/
- src/
- main.js
- gulpfile.js
- index.html
- bundle.js
- package.json
其中，index.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>
src/main.js代碼如下：
let React = require('react');
let ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
在這里，選擇使用browserify進行打包，gulp進行任務構建。由於使用了ES2015和JSX語法，因此使用Babel進行轉換。
首先安裝依賴：
npm install --save react react-dom
npm install --save-dev gulp browserify babelify vinyl-source-stream
然后gulpfile.js代碼為：
var gulp = require('gulp'); var browserify = require('browserify'); var babelify = require('babelify'); var source = require('vinyl-source-stream'); gulp.task('script:build', function() { browserify('src/main.js') .transform(babelify, { presets: ['es2015', 'react'] }) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('./')); }); gulp.task('default', ['script:build']);
但此時執行會報錯，因為babelify需要安裝相應的preset，因此在這里需要：
npm install --save-dev babel-preset-es2015 babel-preset-react
然后執行gulp即可。
此時會將react和react-dom一起打包到bundle.js中。
如果不希望將外部依賴打包進來，即此時index.html中加入如下代碼：
<script src="libs/react/react.min.js"></script> <script src="libs/react/react-dom.min.js"></script>
此時需要安裝browserify-shim，即
npm install --save-dev browserify-shim
然后在package.json中配置：
"browserify-shim": { "react": "global:React", "react-dom": "global:ReactDOM" }
此時gulpfile.js代碼為：
var gulp = require('gulp'); var browserify = require('browserify'); var shim = require('browserify-shim'); var babelify = require('babelify'); var source = require('vinyl-source-stream'); gulp.task('script:build', function() { browserify('src/main.js') .transform(babelify, { presets: ['es2015', 'react'] }) .transform(shim) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('./')); }); gulp.task('default', ['script:build']);
與之前相比，多了一句.transform(shim)。
原文鏈接：http://syaning.com/2015/11/09/gulp-react-task-build/?utm_source=tuicool&utm_medium=referral