如果你不熟悉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. 技术英文单词贴--R

    R redirect 重定向,改变方向 reference 参考,提及,引用 register 注册,登记,挂号 render 渲染 represent 代表,象征 route 路线,路由,通道 ro ...

  2. SAP 常用函数

    1. 访问本地 或别的服务器上文件 函数 CALL METHOD CL_GUI_FRONTEND_SERVICES=>EXECUTE       EXPORTING         DOCUME ...

  3. jsp学习--JSP运行原理,九大隐式对象和JSP常用标签

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

  4. java多线程详解(6)-线程间的通信wait及notify方法

    Java多线程间的通信 本文提纲 一. 线程的几种状态 二. 线程间的相互作用 三.实例代码分析 一. 线程的几种状态 线程有四种状态,任何一个线程肯定处于这四种状态中的一种:(1). 产生(New) ...

  5. MySQL Batch 与 Transaction

    最近在数据库上经常遇到死锁问题. 表现的问题有 1. 有一个查询为: 1) 一个复杂的 select 查处一组大数据 2) 使用事务 update 这组数据的状态 为了让锁定的时间变短, 我将这整个大 ...

  6. 問題排查：行動裝置網頁前端 UI 設計 (2)

    之前上網找了個星級評分的範例來玩, 當然這個範例已經用在另一個專案了, 目前看起來沒什麼狀況, 不過在移植到目前的專案之後, 就出現了怪現象: 1. 在大部份時間裡,點擊星星不會有任何反應 2. 即便 ...

  7. 移动端调试工具推荐 小苹果和debugap

    小苹果的安装很简单,这是官网,一看就会,完全小白教程. http://www.xbole.com/ debugap的也很简单,这里简单附图介绍一下 ps 官网: http://www.debuggap ...

  8. iptables文件

    # Firewall configuration written by system-config-firewall# Manual customization of this file is not ...

  9. （Python ）控制流语句if、for、while

    这一节,我们将学习Python的控制流语句,主要包括if.for.while.break.continue 和pass语句 1. If语句 if语句也许是我们最熟悉的语句.其使用方法如下: x=inp ...

  10. DevExpress组件之——PopupMenu组件(转)

    出处:http://www.cnblogs.com/xlx0210/archive/2010/07/14/1777366.html 目录在项目中使用了第三方控件DevExpress,得开始研究其他控件 ...