使用grunt-contrib-connect和grunt-connect-rewrite删除文件扩展名

时间:2013-10-17 09:13:21

标签: javascript node.js mod-rewrite gruntjs

我正在尝试从我的grunt网络应用中的文件中删除“.html”。

http://testing.com/one/应该从该文件夹返回index.html,但如果没有尾部斜杠(http://testing.com/one),则应检查one.html

grunt-connect-rewrite似乎可以正常使用我能找到的示例,但是从.html文件中删除文件扩展名似乎会让我感到害怕。这里的规则类似于我在.htaccess文件中使用的规则。

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

所以问题是,这里使用的正确规则是什么?

3 个答案:

答案 0 :(得分:5)

答案对我不起作用所以我一直玩弄它直到找到解决方案。

正则表达式:

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

包装版本:

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

完成工作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"]);
};

答案 1 :(得分:1)

规则应该是相反的,就像这样。

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

这将匹配末尾没有'.html','.jpg'或'.css'的所有内容,并在其末尾添加html。确保添加了您不想匹配的所有扩展名(或正则表达式以匹配所有这些扩展名)。


以下是我实现grunt connect rewrite的方法,任何人都在寻找它:


命令行:

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

在grunt文件中包含grunt任务:

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

保存代码段

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

设置配置

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

将中间件添加到上面的选项块中:

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

在底部添加任务:

grunt.registerTask('server', function (target) {
    grunt.task.run([
      'configureRewriteRules',
      //...
    ]);
});

答案 2 :(得分: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'
}

应该做的伎俩。