Gulp- javascript 文件的版本控制

Question

我正在对 javascript 文件进行捆绑和缩小。我正在使用 gulp 执行此操作。现在我希望如果我对我的任何文件进行任何更改并点击 gulp 然后它会生成一个新的捆绑和缩小文件，其版本号如下：

<script src="https://cdn.test.com/bundle-1.0.0-min.js/"></script>

然后

<script src="https://cdn.test.com/bundle-1.0.1-min.js/"></script>

我想使用 gulp 执行此操作，因为我已经将 gulp 用于其他目的。还有一件事，如果这是可能的，那么有什么方法可以让我每次进行更改时都不在我的 html 页面中指定版本号，并且我的 html 页面以某种方式自行获取最新版本。

Answer 1

这只是一般文件的重命名。但这实际上不应该是增加版本号的自动化任务。否则你会很快得到像1.0.2092 这样没有帮助的版本。我建议从package.json 中读取版本并将其用作文件名。如果您已经使用过gulp，应该很容易。

如果您不想使用您的package.json 的全局版本（version 条目），您可以为您的捆绑版本添加一个自己的条目。甚至使用与package.json 不同的文件。您甚至可以将其用作应捆绑文件的配置，以便将所有内容放在一个地方：

{
  "bundle": {
      "version": "1.0.1",
      "files": [
        "path/to/file-one.js",
        "another/file.js",
        "..."
      ]
  }
}

只是一个简单的例子：

var pkg = require("./package.json");
var gulp = require("gulp");
var rename = require("gulp-rename");

gulp.src(pkg.bundle.files)
    .concat("bundle.js")
    .pipe(uglify())
    .pipe(rename(function(path) {
        path.extname = "-" . pkg.bundle.version + "-min" + path.extname;
    }))
    .pipe(gulp.dest("./"));

注意：您可以设置 concat 名称，而不是 rename，但我喜欢拆分它。但只是为了完整：

.concat("bundle-" + pkg.bundle.version + "-min.js")

---

关于问题的第二部分，替换文件中的内容：

如果您也构建您的 html 页面，并将相关路径替换/注入其中，这将是可能的。您可以再次使用package.json 的版本来构建和替换它。或使用gulp-inject 之类的工具。这个简单的工具可以将js 和css 文件添加到您的html 模板中。只需在 html 文件中创建一个应该放置它们的区域，例如：<!-- inject:js --><!-- endinject -->。之后也是一个简单的gulp taks：

var pkg = require("./package.json");
var gulp = require("gulp");
var inject = require("gulp-inject");

gulp.src("dev/index.html")
    .pipe(inject("bundle-" + pkg.bundle.version + "-min.js"))
    .pipe(gulp.dest("prod/"));