在昨天的工作中初步構(gòu)建一個(gè)本地基本可修改運(yùn)行的前端環(huán)境,但畢竟是在webpack合并的代碼中進(jìn)行修改,不利于自定義開發(fā),故今天仍然是在整理這個(gè)環(huán)境,使其能夠滿足編輯代碼實(shí)時(shí)合并刷新頁面看到效果.

本來以為這個(gè)過程非常簡易完成,誰知道摸索了1天的時(shí)間才完成90%的工作量.首先通過閱讀stf根目錄下的 package.json 文件,發(fā)現(xiàn)要用到webpack,gulp,bower等構(gòu)建工具.

首先配置npm 源

修改源地址為淘寶 NPM 鏡像
npm config set registry http://registry.npm.taobao.org/
修改源地址為官方源
npm config set registry https://registry.npmjs.org/

簡單的想通過運(yùn)行:

npm install
bower install 

來完成構(gòu)建工作.

誰知道在此遇到巨大的坑,首先是webpack的版本要求, 不要使用webpack2,變動太大,還有 phantomjs總是下不下來,分析才知道 phantomjs 是用來做測試使用的,我當(dāng)前用不到,直接剔除就行了.所以移除如下兩行:

"karma-phantomjs-launcher": "^1.0.0",
"phantomjs-prebuilt": "^2.1.3",

緊接著 node-sass 的問題,咨詢朋友得知可能與node版本有關(guān)系,我當(dāng)前是5.3.0,索性升級到6.10.解決此問題

npm install webpack@1.14.1 -g
npm install webpack-dev-server@1.14.1 -g
npm install gulp@3.9.1 -g
npm install bower@1.8.0 -g
npm install node-sass --save-dev
npm install node-gyp rebuild -g

期間遇到很多次安裝失敗,都是網(wǎng)絡(luò)原因,庫下載不下來,幸好最終還是下載完成了.

接著分析 gulpfile.js 文件.在里面新增一行:

gulp.task('mb', ['clean','jade','webpack:others', 'webpack:build'])

方便代碼生成.當(dāng)前還是不知道如何像使用grunt watch 一樣來監(jiān)聽代碼的變動做到自動生成合并.

接著 執(zhí)行 gulp mb 來生成res/build目錄下的代碼,打開瀏覽器訪問 http://stf.local 發(fā)現(xiàn)可以登錄,也可以去到設(shè)備列表,但是直接彈出一個(gè)連接失敗的提示框,關(guān)閉之后,在設(shè)備列表中選擇可以使用的設(shè)備時(shí)彈出找不到設(shè)備的錯(cuò)誤提示.

仔細(xì)比對 10.0.2.124 的代碼發(fā)現(xiàn)是websocket鏈接獲取不到cookie造成的, ws://10.0.2.124:7110/socket.io/uip=127.0.0.1&EIO=3&transport=websocket

由于websocket的服務(wù)是由 http://10.0.2.124:7100/app/api/v1/state.js 接口傳回來的數(shù)據(jù)設(shè)置的,其中結(jié)果大致如下:

var GLOBAL_APPSTATE = {"config":{"websocketUrl":"http://10.0.2.124:7110/?uip=127.0.0.1"},"user":{"createdAt":"2017-02-28T12:30:51.993Z","email":"xsd@c.cn","forwards":[],"group":"xAC2VJzvQIOxmUXdKVSK2g==","ip":"127.0.0.1","lastLoggedInAt":"2017-02-28T12:30:51.993Z","name":"xxx","settings":{}}}

因?yàn)槎丝谔柌煌?所以對nginx配置進(jìn)行了一些調(diào)整:

server {
    listen 80;
    server_name stf.local;

    default_type 'text/html; charset=UTF-8';

    location /static/app/build/ {
        alias C:/work/space/stf-all/stf-2.0.0/res/build/;
        #alias C:/work/space/stf/res/build/;
    }

    location / {
        proxy_pass http://10.0.2.124:7100/;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_pass_header Server;

        proxy_redirect http://10.0.2.124:7100/ http://stf.local/;
        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;      
    }
}

map $http_upgrade $connection_upgrade {  
    default upgrade;  
    '' close;  
}
upstream stf-websocket {  
    server 10.0.2.124:7110;  
}  
server {  
    listen 7110;
    server_name stf.local;
    location / {  
        proxy_pass http://stf-websocket;  
        proxy_http_version 1.1;  
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "Upgrade";  
    }  
}
#server stf.local end}

新增一個(gè) websocket的轉(zhuǎn)發(fā)代理,另外搜索

通過搜索 GLOBAL_APPSTATE找到文件 C:\work\space\stf-all\stf-2.0.0\res\app\components\stf\app-state\app-state-provider.js
將其中部分代碼調(diào)整成如下所示:

/* global GLOBAL_APPSTATE:false */
  if (typeof GLOBAL_APPSTATE !== 'undefined') {
    console.log(GLOBAL_APPSTATE);
    values = angular.extend(values, GLOBAL_APPSTATE);
    // replace
    values.config.websocketUrl = values.config.websocketUrl.replace('10.0.2.124', 'stf.local');
    console.log(values);
  }

執(zhí)行 gulp mb 重新訪問stf.local,就正常操作.

至此 我們已經(jīng)可以修改實(shí)際的源碼,并通過 指令來合并代碼了. 先這么用著吧,代碼自動合并的話留著之后再說吧,明天終于可以動手進(jìn)行stf的深入學(xué)習(xí)了.

手動執(zhí)行gulp mb還是麻煩,之前使用過 grunt watch 覺得 非常方便,而gulp自帶的watch存在只執(zhí)行一次的問題,反復(fù)實(shí)驗(yàn)之后,安裝如下兩個(gè)包解決此問題:

npm install gulp-watch gulp-batch --save-dev

接著在 gulpfile.js里面新增

var watch = require('gulp-watch');
var batch = require('gulp-batch');

gulp.task('watchbuild', function () { console.log('Working!', new Date()); });
gulp.task('watch', function () {
  var wa = [];
  wa.push('res/app/**/*.js');
  wa.push('res/auth/**/*.js');
  wa.push('res/common/**/*.js');
  wa.push('res/web_modules/**/*.js');

  wa.push('res/app/**/*.jade');
  wa.push('res/auth/**/*.jade');
  wa.push('res/common/**/*.jade');
  wa.push('res/web_modules/**/*.jade');

  wa.push('res/app/**/*.css');
  wa.push('res/auth/**/*.css');
  wa.push('res/common/**/*.css');
  wa.push('res/web_modules/**/*.css');

  watch(wa, batch(function (events, done) {
      del([
        './tmp'
        , './res/build'
        , '.eslintcache'
      ]);
      // console.log(events, new Date());
      // gulp.start('watchbuild');
      gulp.start('webpack:build');
      gulp.start('webpack:others');
      done();
  }));
});

現(xiàn)在就可以直接使用 gulp watch 來進(jìn)行自動代碼合并了.

遇到的問題是 gulp.start 不知道為什么不能使用 組合的任務(wù),比如 mb, 不然只能修改一次就不會變化,怪異.