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>