如果你不熟悉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. 爬虫---request+++urllib

    网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...

  2. git 一般的使用操作

    1.先在github上建立自己的repository,取名为yourRepo 2.创建本地库 ssh -T git@github.com # 在初始化版本库之前,先要确认认证的公钥是否正确 git i ...

  3. Java写操作

    //:ThinkingInJava/net.mindview.io/write2File.java package net.mindview.io; import java.io.BufferedRe ...

  4. SD-WAN技术分析

    1.概述 转载须注明来自 SDNLAB并附上本文链接. 本文链接:http://www.sdnlab.com/17810.html 宽带接入以及Internet骨干网容量的持续提升,促使企业WAN技术 ...

  5. php 中文正则

    utf8编码中文 preg_match("/^[\x{4e00}-\x{9fa5}]+$/u") 而不是 "/^[\x4e00-\x9fa5]+$/u"

  6. java多条件不定条件查询

    网站或各类管理系统都会用到搜索,会用到一个或多个不确定条件搜索,单条件搜索比较简单,有时候会有多个条件共同查询,如果系统中已经提供了相关的方法供你使用最好,像我做这老系统改版,需要添加搜索,就要自己写 ...

  7. border-radius(边框半径)

    可以使用像素来指定border-radius的属性值使角变圆 除了像素,你还可以使用百分比来指定border-radius边框半径的值

  8. oracle decode(nvl(estimate_qty,0),0,1,estimate_qty) 函數

    oracle   decode(nvl(estimate_qty,0),0,1,estimate_qty) 函數

  9. 那些年我们学过的PHP黑魔法

    那些年我们学过的PHP黑魔法 提交 我的评论 加载中 已评论 那些年我们学过的PHP黑魔法 2015-04-10 Sco4x0 红客联盟 红客联盟 红客联盟 微信号 cnhonker_huc 功能介绍 ...

  10. bzoj 1977

    题意:求严格的次小生成树.点n<=100000,m<=300000 思路:很容易想到先做一边最小生成树,然后枚举每条非树边(u, v, w),然后其实就是把u,v路径上小于w的最大边替换成 ...