使用 VS 2015/gulp 对 js 文件进行版本控制答案

【问题标题】：Using VS 2015/gulp for versioning js files使用 VS 2015/gulp 对 js 文件进行版本控制
【发布时间】：2015-09-06 19:15:10
【问题描述】：

我正在使用 VS 2015、ASP.NET 5 (MVC 6) 和 Gulp 编写带有 angularjs 的 SPA 和补充模块。 我的目标框架是 dnx451。 我已经阅读了几个最佳实践，其中指出来自 Index 的响应应该具有严格的无缓存策略集，并且所有其他资源（例如 js、css、img）都应该被大量缓存。在这样做时，浏览器总是下载轻量级页面并缓存脚本。发布时，我正在尝试执行一个 gulp 任务，它将我的所有 JS 文件合并/uglify 并输出一个 app.min.{version}.js（也适用于 less -> css 文件）。这提供了始终下载最新文件版本的好处，但在最新和最好的时候将它们保存在缓存中。

有没有办法从我的 gulp 任务中获取版本（来自 project.json）和构建（来自 project.json 的 * 部分）？我正在寻找一种方法名称的文件 {version} 部分与网站的版本/构建相匹配。

我已经看到在 gulp 中为 VS 环境变量使用 process.env 的示例，但是在将各个部分组合在一起以实现所需的 Version.Build 格式时遇到了麻烦。

我试过了：

var project = require('./project.json');
gulp.task('js-publish', function(){
  project.version;  //this give 1.0.0-* (makes sense since its a string)
});

和

gulp.task('js-publish', function(){
  process.env.BUILD_VERSION; //which is undefined
});

【问题讨论】：

这并没有回答您关于使用版本命名文件的具体问题，但版本控制脚本文件的一个选项是使用 ScriptTagHelper 即添加 asp-append-version="true" 到脚本标签如果文件在磁盘上发生更改，我认为应该自动将新版本附加到脚本的 url，这样文件名就不必反映版本。我不能 100% 确定它是如何工作的，因为我还没有看到任何文档。
刚刚查看了 ScriptTagHelper 和 asp-append-version 的源代码：“添加了带有文件编码内容的查询字符串“v”。”所以版本控制将是自动的，使用某种文件内容的哈希作为版本
为什么要在每个版本/构建中更改文件，尤其是当内部没有任何更改时？使用 gulp-rev npmjs.com/package/gulp-rev 为你的 js 起一个唯一的名字，只有当内容改变时才会更新。
@LiviuCostea - 这是一个很好的观点。我的意图是仅在发布时执行此 gulp 任务。（在本地构建中，我单独包含所有脚本并且不对它们进行版本化）但是，您的观点是有效的，因为我不知道是否会有一段时间我不会手动增加“维护”部分外部发布版本时 project.json 中的版本。在这种情况下，从我发布的第一种方法中将版本字符串拆分为 '-' 将实现我想要的最终目标。
@JoeAudette - 我曾考虑将这种方法作为备份。我的主要目标是能够轻松查看页面是否正在加载正确版本的脚本。如果我可以看到我的文件为 app.min-1.0.0.js，这将更容易完成

标签： angularjs gulp visual-studio-2015 asp.net-core asp.net-core-mvc

【解决方案1】：

您想使用gulp-rename NPM 包来重命名文件。将 gulp-rename 添加到您的 package.json 文件中。以下是如何在 gulpfile.js 中使用它的示例：

var rename = require("gulp-rename");

// rename via string 
gulp.src("./src/main/text/hello.txt")
  .pipe(rename("main/text/ciao/goodbye.md"))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md 

// rename via function 
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
    path.dirname += "/ciao";
    path.basename += "-goodbye";
    path.extname = ".md"
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md 

// rename via hash 
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
  .pipe(rename({
    dirname: "main/text/ciao",
    basename: "aloha",
    prefix: "bonjour-",
    suffix: "-hola",
    extname: ".md"
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md

【讨论】：