javascript - Removing file extension using grunt-contrib-connect and grunt-connect-rewrite - Stack Overflow

admin管理员组

文章数量:1332395

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

/ should return index.html from that folder, but if there is no trailing slash () 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?

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

http://testing./one/ should return index.html from that folder, but if there is no trailing slash (http://testing./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?

• javascript
• node.js
• mod-rewrite
• gruntjs

Share Improve this question Follow edited Oct 17, 2013 at 9:17 Pavlo 45k1414 gold badges8383 silver badges114114 bronze badges asked Oct 17, 2013 at 9:13 jamie-wilsonjamie-wilson 1,9252121 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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"]);
};

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

rules: {
    // http://testing./one -> http://testing./one.html
    '^(.*[^/])$': '$1.html',    
    // http://testing./one/ -> http://testing./one/index.html
    '^(.*)/$': '$1/index.html'
}

Should do the trick.

本文标签： javascriptRemoving file extension using gruntcontribconnect and gruntconnectrewriteStack Overflow