如果你不熟悉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. 屏蔽input导致的回车提交事件

    onkeypress="if(event.keyCode == 13) return false;"

  2. Cannot fetch index base URL https://pypi.python.org/simple/

    这个就是相源的问题,正常安装你的根目录下会有这个pip.log文件,如下 root@liu:~# ll .pip/ total 16 drwxr-xr-x 2 root root 4096 Sep 1 ...

  3. WinForm窗体PropertyGrid控件的使用

    使用过 Microsoft Visual Basic 或 Microsoft Visual Studio .NET的朋友,一定使用过属性浏览器来浏览.查看或编辑一个或多个对象的属性..NET 框架 P ...

  4. linux 下vim的使用

    vi与vim vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对 ...

  5. 【原】java环境变量配置&& jdk配置 && 各配置的意义

    本配置需要新建JAVA_HOME和classpath两个: JAVA_HOME 指明JDK安装路径.(在安装好java之后就该配置) classpath 为java加载类(class or lib)路 ...

  6. JDBC学习笔记（1）

    说明:本系列学习笔记主要是学习传智播客的李勇老师的教学课程和一本英文电子书<JDBC Recipes A Problem-Solution Approach>所作的笔记. 1,什么是JDB ...

  7. FME之于规划CAD数据质量检测

    最近琢磨规划CAD数据转换入库GIS方面的技术问题,看过一些前辈的文章/文献,对于使用FME WorkBench方面,有了一些了解,往往直接转换数据丢失比较严重,而且GIS对图形属性和空间拓扑比较严格 ...

  8. 关于eclipse在线下载安装android SDK没反应解决方法

    虽然天朝将google这个服务器给和谐掉了 虽然我们也可以选择其他各类FQ软件 虽然你可能有其他手段解决 不过我还是要提供一个参考方法: 具体操作方式: 点击桌面左下角开始菜单中的搜索,把以下路径,复 ...

  9. SkipList算法实现

    SkipList是一种快速查找链表,链表元素的是有序的.由W.Pugh发明于1989年.其算法复杂度如下: Average Worst caseSpace O(n) O(n log n)Search ...

  10. Git 常用几个操作

    获取 git clone git@github.com:XXX/learning.git 更新 git pull  添加 git add XXX 上传本地 git commit -m "ap ...