Removing file extension using grunt-contrib-connect and grunt-connect-rewrite

Question

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?

Answer 1

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"]);
};

Answer 2

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',
      //...
    ]);
});

Answer 3

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.