Question

我有两种生成的JS文件：

xyz.js
xyz.min.js

我想在不同的时间，针对不同的环境引用它们。

目前我需要手动更新引用，因为有大量的JS文件：是否有任何技术可以避免手动更新。这可能吗？

Answer 1

使用GruntJS，您有多种选择来解决此问题：

1。指向html中的单个文件，并根据环境切换编译到不同文件夹中的版本/类型（可能至少有两个Grunt-Tasks ）：

grunt build:dev和grunt build:live

2. 使用grunt-processhtml包。您可以再次根据您的环境需要different targets。像这样（未经测试）：

```

<!-- build:dev -->
<script src="js/lib/path/lib.js"></script>
<script src="js/deep/development/path/script.js"></script>
<!-- /build -->

<!-- build:dist -->
<script src="js/app.min.js"></script>
<!-- /build -->

```

还有grunt-targethtml或grunt-preprocess或grunt-htmlrefs

3。或者仅在为分发环境构建时将src更改为.min：

```

<!-- build:dist:js js/app.min.js -->
<script src="js/app.js"></script>
<!-- /build -->

<!-- changed to -->
<script src="js/app.min.js"></script>

```

4. 假设您使用grunt-uglify，您可以再次指向一个文件，然后让grunt-uglify也生成source-maps。有了这些，您可以为所有环境提供缩小版本，但旁边还有一个sourceMapping文件，当您在控制台/调试器中查看代码时，它看起来像开发代码：Introduction to JavaScript Source Maps

5. 阅读article by Addy Osmani about this，他还指出字符串/正则表达式替换（摘自他的文章）：

    'string-replace': {
      prod: {
        src: './app/**/*.html',
        dest: './dist/',
        options: {
          replacements: [{
            pattern: 'source.js',
            replacement: 'build.js'
          }]
        }
      }

6。他还提到，你可以在HTML中使用Template变量，让grunt-template或grunt-include-replace让你的工作为你做。

Answer 2

使用第三方解决方案并不是一个好主意。使用辅助类来包含js和css文件。您还可以为文件添加vesioning（如果js更改，用户不需要清除缓存）。

在_Layout.cshtml中：

@Html.IncludeJs("~/js/grid.js")

IncludeJs扩展方法的来源：

public static class JavascriptExtension
{
    public static MvcHtmlString IncludeJs(this HtmlHelper helper, string filename)
    {
        if (ConfigurationManager.AppSettings.Get("minimizeJs") == "true")
        {
            filename = Regex.Replace(filename, "\.js$", ".min.js");
        }
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<script src='" + VirtualPathUtility.ToAbsolute(filename) + version + "'></script>");
    }

    private static string GetVersion(this HtmlHelper helper, string filename)
    {
        var context = helper.ViewContext.RequestContext.HttpContext;

        if (context.Cache[filename] == null)
        {
            var physicalPath = context.Server.MapPath(filename);
            var version = "?v=" + new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("yyyyMMddhhmmss");
            context.Cache.Add(physicalPath, version, null, DateTime.Now.AddMinutes(1), TimeSpan.Zero, CacheItemPriority.Normal, null);
            context.Cache[filename] = version;
            return version;
        }
        else
        {
            return context.Cache[filename] as string;
        }
    }

}

针对不同环境更新HTML页面中的JS引用

2 个答案: