React.js + LiveReload配置详解
一、介绍一下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>
15、cmd打开命令行，到项目文件夹下，输入gulp serve启动服务，如图，服务启动成功：
16、好的，最后我们在我们的hello.html中，我们做一点小小的修改，比如：
17、接下来，就是见证奇迹的时刻啦，在我们按保存我们对hello.html修改的同时，我们到chromo浏览器的hello.html页面，没有按F5刷新哦，他自动就将内容改为了：
18、来，我们来看我们此时的浏览器livereload图标，已经由空心的，变为实心了。如下图。如果能够自动刷新，就说明我们的生产环境安装成功了哦！
最后，昨天折腾了一下午，终于完成了，记录下过程，怕以后自己忘记，如果能万幸帮助到大家，那也是再好不过啦。如果有什么问题或者错误，请留言评论哦。
