6

I'm trying to remove '.html' from files in my grunt web app.

http://testing.com/one/ should return index.html from that folder, but if there is no trailing slash (http://testing.com/one) it should check for one.html

The grunt-connect-rewrite seems to be working fine with examples that I can find, but removing file extensions from .html files seems to be killing me. The rule here is one similar to what i'd use in an .htaccess file. 

connect: {
    server: {
        options: {
            port: 9000,
            keepalive: true,
            base: 'dist',
            middleware: function(connect, options) {
              return [
                rewriteRulesSnippet, 
                // Serve static files
                connect.static(require('path').resolve(options.base))
              ];
            }
        },
        rules: {
            '^(.*)\.html$': '/$1'
        }
    }
}

So the question is, what is the correct rule to use here?

Pavlo
  • 43,301
  • 14
  • 77
  • 113
jamie-wilson
  • 1,925
  • 21
  • 38

3 Answers3

5

The answers didn't work for me so I played around with it until I found a solution.

Regex:

from: '(^((?!css|html|js|img|fonts|\/$).)*$)',
to: "$1.html"

Package versions:

"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-connect": "~0.5.0",
"grunt-connect-rewrite": "~0.2.0"

Complete working Gruntfile:

var rewriteRulesSnippet = require("grunt-connect-rewrite/lib/utils").rewriteRequest;
module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      html: {
        files: "**/*.html"
      }
    },
    connect: {
      options: {
        port: 9000,
        hostname: "127.0.0.1"
      },
      rules: [{
        from: '(^((?!css|html|js|img|fonts|\/$).)*$)',
        to: "$1.html"
      }],
      dev: {
        options: {
          base: "./",
          middleware: function(connect, options) {
            return [rewriteRulesSnippet, connect["static"](require("path").resolve(options.base))];
          }
        }
      },
    }
  });
  grunt.loadNpmTasks("grunt-connect-rewrite");
  grunt.loadNpmTasks("grunt-contrib-connect");
  grunt.loadNpmTasks("grunt-contrib-watch");
  grunt.registerTask("default", ["configureRewriteRules", "connect:dev", "watch"]);
};
Milos
  • 311
  • 3
  • 9
  • 1
    This is the only one that works for me. Those libs have all had new versions, so if you're seeing this answer and have just done a 'npm install grunt-contrib...' without version numbers, you'll have to change 'options.base' in the middleware to 'options.base[0]'. And sorry for such a slow reply! – jamie-wilson Jun 26 '14 at 21:54
  • 1
    thanks it worked for me, with latest versions, I just had to add rewriteRulesSnippet as the first middleware. it worked out of the box – Gabo Esquivel Jan 27 '15 at 23:19
1

the rule should be the other way around, something like this.

rules: {'(.*)(?!\.html|\.jpg|\.css)' : '$1.html'}

This will match everything that doesn't have '.html', '.jpg' or '.css' on the end and add html to the end of it. Make sure you add all extensions that you don't want to match, (or a regex to match all of them).

Here is how I implemented the grunt connect rewrite incase anyone is looking for it:

Command line: 

npm install grunt-connect-rewrite --save-dev

Include the grunt task in your grunt file:

grunt.loadNpmTasks('grunt-connect-rewrite’);

Save the snippet

var rewriteRulesSnippet = require('grunt-connect-rewrite/lib/utils').rewriteRequest;

Set up the config

grunt.initConfig({
    connect: {
        options: {
            port: 9000,
            hostname: 'localhost'
            base:'<%= yeoman.app %>', //make sure you have a base specified for this example
        },
        rules: {
            '^/index_dev.html$': '/src/index.html',
            '^/js/(.*)$': '/src/js/$1',
            '^/css/(.*)$': '/public/css/$1'
        }
    }
})

Add the middleware to the above options block:

options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: '*',
    debug: true,
    base:'<%= yeoman.app %>',
    middleware: function(connect, options){
      if (!Array.isArray(options.base)) {
        options.base = [options.base];
      }
      var middlewares = [rewriteRulesSnippet];
      options.base.forEach(function(base) {
        // Serve static files.
        middlewares.push(connect.static(base));
      });
      return middlewares;
    }
}

Add the task at the bottom:

grunt.registerTask('server', function (target) {
    grunt.task.run([
      'configureRewriteRules',
      //...
    ]);
});
alockwood05
  • 1,066
  • 11
  • 18
0
rules: {
    // http://testing.com/one -> http://testing.com/one.html
    '^(.*[^/])$': '$1.html',    
    // http://testing.com/one/ -> http://testing.com/one/index.html
    '^(.*)/$': '$1/index.html'
}

Should do the trick.

Artem Vitiuk
  • 1
  • 1