Gulp- JavaScript 文件的版本控制

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.

如果您不想使用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：

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/"));