React.js + LiveReload配置详解

时间 2019-12-08

标签 react.js react livereload 配置详解栏目 React 繁體版

原文原文链接

1、介绍一下LiveReload：css

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.html

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.node

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

2、环境基础jquery

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

3、安装开始npm

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

二、安装git，记得以下页面必定要选第二个bootstrap

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

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

五、使用包管理器npm命令

npm install bower -g

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

bower install react

如果出现这样的界面，说明安装成功

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

bower install babel

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

八、根据个人文件目录，引用在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/

九、同时，咱们也能够经过bower命令安装各类生产环境，好比bootstrap、jquery等等，bower install XXX --save

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

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

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

十一、好了，安装好后，接下的任务是，全局安装咱们的npm livereload了

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

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

十二、如今在工程目录下创建一个gulpfile.js文件，

1三、打开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']);

1四、我在项目工程文件夹下，创建了个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>

1五、cmd打开命令行，到项目文件夹下，输入gulp serve启动服务，如图，服务启动成功：

1六、好的，最后咱们在咱们的hello.html中，咱们作一点小小的修改，好比：

1七、接下来，就是见证奇迹的时刻啦，在咱们按保存咱们对hello.html修改的同时，咱们到chromo浏览器的hello.html页面，没有按F5刷新哦，他自动就将内容改成了：

1八、来，咱们来看咱们此时的浏览器livereload图标，已经由空心的，变为实心了。以下图。若是可以自动刷新，就说明咱们的生产环境安装成功了哦！

最后，昨天折腾了一下午，终于完成了，记录下过程，怕之后本身忘记，若是能万幸帮助到你们，那也是再好不过啦。若是有什么问题或者错误，请留言评论哦。