node.js - Gulp 连接，从不同于“root”的目录中提供一些资产

Question

我想知道 gulp-connect 是否可以从不同的目录提供一些文件。就像是：

http://localhost:8080/index.html => root: '/root/app'

但

http://localhost:8008/js/main.js => from '/root/js/' not from 'root/app/js' 
http://localhost:8008/css/main.css => from '/root/css/' not from 'root/app/css/' 

Answer 1

您可以将中间件函数传递给该函数，以gulp-connect允许您修改请求对象并因此重写请求 URL：

gulp.task('serve', function() {
  connect.server({
    root: 'root',
    middleware: function() {
      return [ function(req, res, next) {
        if (!/^\/(js|css)\/.*/.test(req.url)) {
          req.url = '/app' + req.url;
        }
        next();
      }];
    }
  });
});

在上面的任何路径开始/js/或/css/将通过不变。由于我们的基本文件夹是root这样的路径，/js/main.js因此将解析为root/js/main.js.

所有其他路径都将在前面加上/app，这意味着类似的路径/index.html将透明地解析为root/app/index.html。

除了像我上面那样使用自定义逻辑，您还可以使用类似的东西http-rewrite-middleware，它允许您指定受 nginx 启发的重写表达式：

var rewrite = require('http-rewrite-middleware');

gulp.task('serve', function() {
  connect.server({
    root: 'root',
    middleware: function() {
      return [ rewrite.getMiddleware([
        { from: '^/js/(.*)$', to: '/js/$1' },
        { from: '^/css/(.*)$', to: '/css/$1' },
        { from: '^(.*)$', to: '/app/$1' }
      ])];
    }
  });
});