Browser-sync: mod-rewrite support

Created on 9 Dec 2013  路  6Comments  路  Source: BrowserSync/browser-sync

Hi. I'd like to use this library in a MAMP project with mod-rewrite, so some assets files paths are not the same in the server and in the browser. For example:
/assets/cache/css/styles.css in the browser is /assets/css/styles.css in the server. There can be also some files pointing to the same file (I have a css preproccessor that inject imported css) so some files in the server (for example: base.css, grid.css, etc) can be just one file in the browser.
Is there any way to map the watched files to create alias between server and browser files?. Some like this (just an idea):

module.exports = {
    files: {
        "assets/cache/css/styles.css": [
            "assets/css/base.css",
            "assets/css/grid.css"
        ],
        "assets/cache/css/styles2.css": [
            "assets/css2/*.css"
        ]
    }
}
enhancement

Most helpful comment

You can do this using the connect-modrewrite middleware:

var modRewrite = require('connect-modrewrite');

server: {
  middleware: [
    modRewrite([
      '^[^\\.]*$ /index.html [L]'
    ])
  ]
}

All 6 comments

Nice idea!

This will go on the 'enhancements list'.

You're the first person to request such a feature but I can see how it would be useful!

Thanks! I keep an eye on this change.

Closing this as an issue, but it's on the todo list for improvements!

Thanks.

You can do this using the connect-modrewrite middleware:

var modRewrite = require('connect-modrewrite');

server: {
  middleware: [
    modRewrite([
      '^[^\\.]*$ /index.html [L]'
    ])
  ]
}

@jasonmorganson nice!

@jasonmorganson , thats actually amazing! I've spent much time on it... Could you explain some details of regex.. or give some reference? I got part of what u did, but not completely. Thanks for the solution.

Was this page helpful?
0 / 5 - 0 ratings