原文：3w.ydcss.co*m/archives/18#lesson6

1. 下載nodejs安裝包

2. 安裝Nodejs

Window：直接下一步下一步式安裝。安裝好後WIN+R輸入cmd調出DOS視窗，輸入node看是否有互動，如果沒有則檢視系統變數Path，把path配置上去。 
Linux : 暫時沒有實戰。

3. 測試

建立測試檔案：test.js

var http = require("http"); 
http.createServer(function(request, response) { 
response.writeHead(200, {"Content-Type"
 
: "text/plain"}); 
response.write("test nodjs"); 
response.end(); 
}).listen(8899); 
console.log("nodejs start listen 8899 port!"); 

• 1
• 2
• 3
• 4
• 5
• 6
• 7

進入cmd命令視窗，進入test.js檔案的位置node test.js 
看看是否有資訊正常輸出和瀏覽器127.0.0.1:8899看是否有正常的列印。 
如果都有，說明安裝配置成功。

4. 配置npm的全域性路徑

Windows下的Nodejs npm路徑是appdata，可能不是我們想要的路徑，可以改成我們指定的路徑方便管理。 
在cmd下執行以下命令 
npm config set cache “D:\nodejs\node_cache” 
npm config set prefix “D:\nodejs\node_global” 
如果命令無效，可以去nodejs的安裝目錄中找到node_modules\npm\npmrc檔案，這個檔案存放npm的userconfig配置。 
修改如下即可： 
prefix = D:\nodejs\node_global 
cache = D:\nodejs\ node_cache

5. 全域性安裝gulp

開啟Node.js command prompt 
輸入命令：npm install –g gulp 
然後輸入gulp -v，如果提示不是內部或外部命令，說明沒有配置系統變數path，手動去配置pasth，地址是prefix的地址。

6. 本地安裝gulp

建立專案，建立Gulpfile.js和package.json檔案。執行命令npm install gulp –save-dev，安裝本地gulp。

7. gulp的實施與使用

建立工作目錄與釋出目錄 
工作目錄：即沒有經過壓縮合並等處理的檔案存放目錄。 
釋出目錄：即專案釋出所引用的檔案目錄地址，這裡的檔案是經過gulp壓縮合並等處理後生成的檔案，處理過後的名字可以自定義，也可以不處理即與未處理檔名相同。

8.安裝gupl依賴包

安裝必要的開發工具包

• gulp ：基於流的自動化構建工具
• gulp-browserify ：前端模組及依賴管理
• gulp-concat ：檔案合併外掛
• gulp-react ：JSX語法轉化工具
• gulp-connect ：構建本地開發Web伺服器
• lodash ：一個具有一致介面、模組化、高效能等特性的 JavaScript 工具庫
• reactify ：React 編譯器

npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev

安裝生產環境依賴包

• react ：主要框架
• react-dom ：React的DOM操作類
• bootstrap ：bootstrap樣式

npm install --save react react-dom

bower install --save bootstrap

 

寫入gulp配置檔案gulpfile.js

你可以在npm的網站上找到相應外掛的gulp配置寫法。我配置的gulpfile.js129

開發

• 切分相應的模組
• 分清UI元件和容器元件
• 學會如何在元件之間通訊
• 注意寫作規範和開發細節

部署生產

請切換分支到 product 分支

修改gulpfile檔案

//新增copy任務
gulp.task('copy',function(){
    gulp.src('./app/css/*')
    .pipe(gulp.dest('./dist/css'));

    gulp.src('./bower_components/**/*')
    .pipe(gulp.dest('./dist/libs'));

    gulp.src('./*.html')
    .pipe(gulp.dest('./dist'));
});

//生產伺服器
gulp.task('connect-pro',function(){
    connect.server({
        root:'./dist',
        port:port,
        livereload:true,
    })
});

//新增build任務
gulp.task('build',['browserify','copy']);

//新增啟動生產伺服器任務
gulp.task('server-pro',['build','connect-pro','watch']);

修改index.html引用目錄

<link rel="stylesheet" href="./libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./css/index.css">

<script src="./js/main.js"></script>

使用gulp-gh-pages部署到github pages

下載gulp-gh-pages外掛

npm install --save-dev gulp-gh-pages

在gulpfile檔案中新增配置gulp-gh-pages程式碼

var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});

 

初始化npm bower

npm init  //一直enter，預設就好

bower init //同上一直enter

 

git clone https://github.com/tsrot/react-zhihu.git

cd react-zhihu

npm install

bower install

gulp server-pro (這個是在gulpfile.js中宣告的服務)

//用瀏覽器開啟 localhost:5000