React.js + LiveReload配置详解

Z时代
2024-01-10
分类：综合

react

一、介绍一下LiveReload：

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.
Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

大意就是说，使用liveReload之后呢，当我们在我们的css或者html文件修改后，在浏览器上会自动更新页面，省去了我们自己去刷新页面的过程。

二、环境基础

已经安装nodejs，nodejs的安装不再赘述。

三、安装开始

1、如果没有git环境，则先安装git环境，如果已经安装好了git的，从第4部开始。附上git安装，首先下载git https://code.google.com/p/msysgit/downloads/list

2、安装git，记得如下页面一定要选第二个

3、一直next下去，直到安装；然后把安装后的git的bin、cmd所在位置以及nodejs的node_module，之间以英文字符分隔，写进系统环境变量里，记得是系统环境变量。不然待会儿会报错哦！

4、安装了git环境后（如果有git环境，忽略1-3步骤），接下来安装Bower(bower可以对第三方模块进行统一的版本管理或者迭代）

5、使用包管理器npm命令

npm install bower -g

6、安装reactjs，在自己的项目工程下，假设是文件夹路径是在f:盘，reactjs文件夹>envbuild文件夹

bower install react

若是出现这样的界面，说明安装成功

7、安装jsx解释器，（在命令行中通过bower install babel安装，并在script标签中引入babel下的browser.min.js文件），JSX语句所在的<script>标签设定text/babel类型"。

bower install babel

到这里的话，我们的万里长征就完成了一小步啦，现在来检验我们在这一阶段的小成果啦!

8、根据我的文件目录，引用在react文件夹下的三个js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello React</title>
    <script  src="../../bower_components/react/react.min.js"></script>    
    <script  src="../../bower_components/react/react-dom.js"></script>
    <script  src="../../bower_components/babel/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    //jsx
    var HelloWorld = React.createClass({
render:function(){
        return (<p>hello world</p>);
    }
    });
    ReactDOM.render(<HelloWorld />,document.getElementById('example'));
    </script>
</body>
</html>

在浏览器运行，如果你看到如下的内容，那就恭喜你，你的react已经可以使用了。具体的react语法见官方的文档哦！http://reactjs.cn/

9、同时，我们也可以通过bower命令安装各种生产环境，比如bootstrap、jquery等等，bower install XXX --save

10、react成功装上之后，我们接着来看怎么将gulp与LiveReload结合在一起帮助我们的开发，LiveReload首先需要去谷歌Chrome浏览器LiveReload chromo网上应用商店，怎么去呢？

点击如图，更多工具-->扩展程序，然后在搜索框中输入LiveReload，并且将其添加到chromo，之后，如图：

然后就会在浏览器的上边栏出现一个空心圆旋转的标志

11、好了，安装好后，接下的任务是，全局安装我们的npm livereload了

12、安装成功后，接下来再安装gulp的一些插件，也是在命令行，去到自己的的工程目录下，安装自己能用得到的一些插件，例如：

npm install --save-dev gulp gulp-connect gulp-browserify gulp-concat等等的一些插件

12、现在在工程目录下建立一个gulpfile.js文件，

13、打开gulpfile.js文件，内容如下：watch后面的路径就是你需要监视的文件的路径，就是说，你需要他一改变，就需要更新，待会儿我会在app-->html下建立一个html页面，来简单地测试一下

 1 var gulp = require('gulp'),
 2     connect = require('gulp-connect'),
 3     browserify = require('gulp-browserify'),
 4     concat = require('gulp-concat'),
 5     port = process.env.port || 5000;
 6 
 7 gulp.task('browserify',function(){
 8     gulp.src('./app/js/main.js')
 9     .pipe(browserify({
10         transform: 'reactify',
11     }))
12     .pipe(gulp.dest('./dist/js'))
13 });
14 
15 // live reload 
16 gulp.task('connect',function(){
17     connect.server({
18         // root:'./',
19         port: port,
20         livereload: true,
21     })
22 })
23 
24 // reload Js 
25 gulp.task('js',function(){
26     gulp.src('./dist/**/*.js')
27     .pipe( connect.reload() )
28 })
29 
30 gulp.task('html',function(){
31     gulp.src('./app/**/*.html')
32     .pipe( connect.reload() )
33 });
34 
35 gulp.task('watch',function(){
36     gulp.watch('./dist/**/*.js',['js']);
37     gulp.watch('./app/**/*.html',['html']);
38     gulp.watch('./app/js/**/*.js',['browserify']);
39 })
40 
41 gulp.task('default',['browserify']);
42 
43 gulp.task('serve',['browserify','connect','watch']);

14、我在项目工程文件夹下，建立了个app文件夹，再建了个html文件夹，里面放上之前的html代码，来检测是否有生效（注意：文件要在gulp的监视watch范围之内哦）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello React</title>
    <script  src="../../bower_components/react/react.min.js"></script>    
    <script  src="../../bower_components/react/react-dom.js"></script>
    <script  src="../../bower_components/babel/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    //jsx
    var HelloWorld = React.createClass({
        render:function(){
        return (<p>hello world</p>);
    }
    });
    ReactDOM.render(<HelloWorld />,document.getElementById('example'));
    </script>
</body>
</html>