如果你不熟悉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. Python基础学习笔记FromImooc.com

    1.list L = ['a','a','a','a','a','a3'] L[0] = a L[-1] = a3   添加新元素 L.append('paul') L.insert(-1,'Paul ...

  2. sql sever 2008修改数据类型

    如果是新表,直接在表中修改: 如果不是新表,则须sql语句修改 附sql语句 alter table 表名 alter column 列名 新的数据类型

  3. u-boot 编译时间

    给定的格式FORMAT 控制着输出,解释序列如下: %%    一个文字的 %  %a    当前locale 的星期名缩写(例如: 日,代表星期日)  %A    当前locale 的星期名全称 ( ...

  4. 线状DP(石子归并)

    题意:有N堆石子,现要将石子有序的合并成一堆,规定如下:每次只能移动相邻的2堆石子合并,合并花费为新合成的一堆石子的数量.求将这N堆石子合并成一堆的总花费最小(或最大). dp[i][j]为从i到j的 ...

  5. window.opener强大功能

    window.opener后面的方法可以调用任意父窗口里面js的方法. eg.query()是父窗口的 function refreshParent(){   window.opener.query( ...

  6. 看起来像一个输入框的input，实际上是有两个input

    看起来像一个输入框的input,实际上是有两个input

  7. 【概念笔记】JAVA基础 - part1

    IT`huhui前言录 这是自己对JAVA基础的一个小总结,会不断完善.因为时间仓促的原因. 每学习一段时间,停下来,静心总结一下,甚好.停停走,走走停,一往无前,不摔倒. 一些链接里面是我看到一些人 ...

  8. 10 个超酷的加载中的 Gif 动画

    #1: Calming cat loading gif #2: Stylish loading gif #3: Shape changing loading gif #4: Loading gif f ...

  9. C#学习之Linq to Xml

    前言 我相信很多从事.NET开发的,在.NET 3.5之前操作XML会比较麻烦,但是在此之后出现了Linq to Xml,而今天的主人公就是Linq to Xml,废话不多说,直接进入主题. 题外:最 ...

  10. 理解 Soap

    http://www.cnblogs.com/yhuang/archive/2012/04/04/share_storm.html 自己也写了下: using System; using System ...