JavaScript文件的Gulp版本控制

Question

我正在打包和缩小javascript文件。我正在用口水做。现在我想要，如果我对任何文件进行了任何更改并击中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，应该会非常简单。

如果您不想使用version的全局版本（[package.json条目），则可以为捆绑软件版本添加自己的条目。甚至使用与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("./"));

注意：您可以仅设置rename名称，而不是concat，但是我想将其拆分。只是为了完整：

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

---

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

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

gulp