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图标,已经由空心的,变为实心了。如下图。如果能够自动刷新,就说明我们的生产环境安装成功了哦!
最后,昨天折腾了一下午,终于完成了,记录下过程,怕以后自己忘记,如果能万幸帮助到大家,那也是再好不过啦。如果有什么问题或者错误,请留言评论哦。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步