Building a react task using gulp

For gulp in react in the construction, find a lot of information, read a lot of articles, also according to the article tested many times, but is not successful. Many articles in fact are more or less lack of some steps, but also not to the source file reference, this is for the novice is the capital of the ignorant force. Finally found an article can be achieved, reproduced. You can write react in the back.

The sample directory structure is as follows:

-libs/    -react/-node_modules/-src/    - main.js- gulpfile.js- index.html - Bundle.js-Package.json

Where the index.html code is as follows:

<! DOCTYPE html>
src/main.jsThe code is as follows:
Let React = require (' React '= require (' react-dom '); Reactdom.render (    ));
Here, you choose to use browserify for packaging, gulp for task building. Since the ES2015 and JSX syntax are used, the conversion is performed using Babel.
Install dependencies First:
NPM Install--save react react---save-dev Gulp browserify babelify Vinyl-source-stream
Then gulpfile.js the code is:
 var  gulp = require (' Gulp '  var  browserify = require (' browserify '  var  babelify = require (' babelify '  var  Source = require (' Vinyl-source-stream '  ' script:build ', function   () { Browserify ( ' src/main.js '  ' E S2015 ', ' React '  ' bundle.js '  './'  ' Default ', [' script:build ']); 
However, the execution will be error, because babelify the corresponding preset needs to be installed, so here you need:
NPM Install--save-dev babel-preset-es2015 babel-preset-react
Then gulp you can do it.
This will be react react-dom packaged together bundle.js in.
If you do not want to package external dependencies, add the following code at this point index.html :
<script src= "Libs/react/react.min.js" ></script><script src= "Libs/react/react-dom.min.js" ></ Script>
Installation is required at this time browserify-shim , i.e.
NPM Install--save-dev Browserify-shim
Then in the package.json configure:
"Browserify-shim": {    "react": "Global:react",    "react-dom": "Global:reactdom"}
At this point gulpfile.js the code is:
varGulp = require (' Gulp '));varBrowserify = require (' browserify '));varShim = require (' Browserify-shim '));varBabelify = require (' babelify '));varSource = 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 ']);
Compared with the previous, more than one sentence .transform(shim) .
Original link: http://syaning.com/2015/11/09/gulp-react-task-build/?utm_source=tuicool&utm_medium=referral
Building a react task using gulp