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

Question

I am trying to remove ".html" from files in my grunt web application.

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

Grunt-connect-rewrite seems to work fine with the examples I can find, but removing the file extensions from the .html files seems to be killing me. The rule here is similar to what I would use in the .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, which correct rule to use here?

Answer 1

The answers did not work for me, so I played with him until I found a solution.

Regex:

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

Package Options:

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

Full Grunt working file:

 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 anything that does not have ".html", ".jpg" or ".css" at the end and add html to the end. Make sure that you add all the extensions that you do not want to match (or a regular expression to match them).

---

This is how I implemented the grunt connect connection hook, which anyone is looking for it:

---

Command line:

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

Include the grunt task in the grunt file:

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

Save Slice

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

Customize configuration

 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 middleware to the above block of options:

 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 below:

 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' } 

Gotta do the trick.