仓库源文，站点原文

title: 在线调试方案的思考与实践 categories:

• 前端杂烩 tags:
• tech
• cnblogs date: 2015-08-24 10:29:00 mark: hot fromUrl: http://www.cnblogs.com/hustskyking/archive/2015/08/24/debug-suggest.html from: 博客园

  我："嘿，线上有问题啦！我要调试代码！"
电脑："好的，主人。请问是哪个页面？"（弹出浮层）
  我：浮层中输入URL。
电脑："请问是哪个地方出问题了？"
  我：（指着电脑）"模块A和模块B。"
电脑：正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹
  我：编辑代码，然后实时预览效果。

 我："哈，已经修复了，帮我提交代码~"
电脑：正在diff代码...收到确认提交信号，提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

<script src="https://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

var http = require('http');
// npm i http-proxy --save
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});

var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: 'http://127.0.0.1:3400' });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

<!-- html code -->
<script src="https://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!-- html code -->

<!-- html code -->
<script src="https://example.com/path/a.js"></script>
<script src="https://example.com/path/b.js"></script>
<script src="https://example.com/path/c.js"></script>
<!-- html code -->

var http = require('http');
// npm i request --save;
var request = require('request');
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") + 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace('<script src="https://example.com/path/??a-min.js,b-min.js,c-min.js"></script>',
                '<script src="https://example.com/path/a.js"></script>\
                <script src="https://example.com/path/b.js"></script>\
                <script src="https://example.com/path/c.js"></script>'
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

# 启动脚本
start: createFile getMod getPage

# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page

# 拉取模块仓库，这里有几十个，比较费时，请耐心等待...
getMod:
  cd module; \
  for i in $(MODS); do \
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; \
    git co -b master;\
    git co -b $(MODSV);
  done

# 拉取页面仓库，tbindex
getPage:
  cd page; \
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;