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

您可以将 middleware function 传递给 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/' },
        { from: '^/css/(.*)$', to: '/css/' },
        { from: '^(.*)$', to: '/app/' }
      ])];
    }
  });
});

Gulp 连接，从不同于 'root' 的目录提供一些资产

Gulp connect, serving some assets from a directory different from 'root'

node.js

gulp

gulp-connect