如果你不熟悉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

使用gulp进行React任务的构建的更多相关文章

  1. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  2. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  3. Gulp安装及配合组件构建前端开发一体化(转)

    Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...

  4. 使用 Yarn workspace,TypeScript,esbuild,React 和 Express 构建 K8S 云原生应用(一)

    本文将指导您使用 K8S ,Docker,Yarn workspace ,TypeScript,esbuild,Express 和 React 来设置构建一个基本的云原生 Web 应用程序. 在本教程 ...

  5. gulp+sass+react前端开发，环境搭建

    由于前端技术的发展与市场需求的提高,前端开发已经不仅仅是写几个页面那么简单.如何有效的开发.管理一个越来越庞大.越来越复杂的前端项目,成为互联网团队必须要面对的难题. 各种js库.ui库曾经火极一时. ...

  6. Gulp安装及配合组件构建前端开发一体化

    原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...

  7. Gulp:基于流的自动化构建工具

    前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...

  8. 【JAVASCRIPT】React学习-如何构建一个组件

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...

  9. 基于gulp的前端自动化开发构建新

    关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新, ...

随机推荐

  1. html css一些记录

    1.忽略将页面中的数字识别为电话号码 <meta content="telephone=no" name="format-detection" /> ...

  2. 返回绝对值--Math.Abs 方法

    Math.abs()  返回指定数字的绝对值.

  3. Browser设置搜索引擎

    Browser设置搜索引擎,在com.android.browser.preferences.GeneralPreferencesFragment中加载R.xml.general_preference ...

  4. [转载]tail No space left on device

    转载http://www.chenxie.org/?p=717 # tail -f ../logs/catalina.outtail: cannot watch `../logs/catalina.o ...

  5. UVAL1277_Cops and Thieves

    单源点汇点无向图,要阻隔某个点的流量,必须在一个点上消耗一定的价值,问你能否在消耗价值不超过k的前提下,阻隔源点到汇点的流量. 直接对于有权值的点拆点,拆后边容量即为点权.其余的点的容量无穷,最大流即 ...

  6. JS-定时器管理实例

    /** * Created by 12461 on 2016/11/6. */window.onload = function () { var oBtn1 = document.getElement ...

  7. MVC_Ajax请求

    MVC_Ajax请求MVC中的AJAX操作原理还是基于Jquery的封装操作.但是吧没有那么恐怖.Ajax.BeginForm:使用Ajax.BeginForm方法会生成一个form表单,最后以Aja ...

  8. 模板短信接口调用java,pythoy版（一） 网易云信

    说明 短信服务平台有很多,我只是个人需求,首次使用,算是测试用的,故选个网易(大公司). 稳定性:我只测试了15条短信... 不过前3条短信5分钟左右的延时,后面就比较快.... 我只是需要发短信,等 ...

  9. Python 迭代dict 效率

    迭代dict也要讲求效率,不然就要走进性能陷阱 以下三种迭代方式:keys,iterkeys, hashkey import timeit DICT_SIZE = 100 * 100000 testD ...

  10. codeforces 427E

    题意:给定一位空间里n个点的坐标,每个坐标有一个罪犯,现在要建一个警局,并且这个警局只有一辆车,车一次最多载m个人,问应建在哪是的抓回所有罪犯的路程和最小. 思路: 很明显建在罪犯的点上一定可以找到最 ...