node.js - 如何使用 gulp-inject 将修订后的资源正确注入(inject)到 jade 模板中？

Question

我有一个带有 express 中间件的 node.js 应用程序。静态页面是使用 jade 模板引擎制作的，并根据请求使用 res.render("template-name.jade");

进行渲染

SASS 和 javascript 文件被缩小并放置在 /build/js 和 /build/css 文件夹中分别。

此外，使用 gulp 和 gulp-rev 每个文件都会在创建 list 文件时在其名称上附加一个修订字符串。以下任务代码用于 JavaScript 文件:

gulp.task( "prepare_js", function() {
    gulp.src( "./js/*.js" )
    .pipe( annotate() )
    .pipe( gulp_if( isDev, uglify() ) )
    .pipe( rev() )
    .pipe( gulp.dest('build/js') )  // write rev'd assets to build dir
    .pipe( rev.manifest() )
    .pipe( gulp.dest('build/js') ) // write manifest to build dir
    .pipe( gulp.dest( "./build/js") )
});

任务生成 list 文件，例如:

{
    "index.js": "index-d41d8cd9.js"
}

类似的任务应该是将 sass 编译为 css。

问题是如何正确使用gulp-inject(在该任务中或作为单独的任务)在每个 .jade 文件中仅查找并替换该 .jade 文件中定义的 Assets 带有修订字符串的？

我看到了解决这个问题的两种主要方法。

方法 1

每次使用相同的 jade 模板，并以某种方式在每个 .jade 文件中定义应注入(inject)的文件(基于原始文件，不附加修订字符串，文件名)。然后搜索上一个任务运行留下的行并将其替换为具有新修订字符串的新行。

例如，假设我们有 2 个文件。他们每个人都可以使用公共(public) Assets ，以及一些特定的 Assets 。

// index.jade
script(src="/js/index-xxxxxx.js", type="text/javascript")
script(src="/js/more-js-xxxxxx.js", type="text/javascript")
link(rel="stylesheet", href="/css/index-xxxxxx.css")


// product.jade
script(src="/js/index-xxxxxx.js", type="text/javascript") // <-- here we use index-xxxxxx.js also 
link(rel="stylesheet", href="/css/file1-xxxxxx.css")
link(rel="stylesheet", href="/css/file2-xxxxxx.css")

我们假设 xxxxxx 定义了上一个 gulp 任务留下的修订字符串。在我们的例子中，可以更改上面的文件以添加注入(inject)的注释，例如:

// index.jade
<!-- index.js -->
script(src="/js/index-xxxxxx.js", type="text/javascript")
<!-- one-more-js-file.js -->
script(src="/js/one-more-js-file-xxxxxx.js", type="text/javascript")
<!-- styles.css -->
link(rel="stylesheet", href="/css/styles-xxxxxx.css")
<!-- endinject -->


// product.jade
<!-- product.js -->
script(src="/js/index-xxxxxx.js", type="text/javascript")
<!-- file1.css -->
link(rel="stylesheet", href="/css/file1-xxxxxx.css")
<!-- file2.css -->
link(rel="stylesheet", href="/css/file2-xxxxxx.css")
<!-- endinject -->

这应该告诉 gulp-inject 特定的行应该更改为包含具有新修订字符串的文件的新行。

方法2

有 2 个模板文件夹，一个包含所有模板源，另一个包含运行注入(inject)任务后的模板。 Express 应用程序将指向文件夹 2 作为从中获取静态数据的位置。

在第一个文件夹下的所有模板中，只需添加应注入(inject)哪个文件的注释，如下所示:

// index.jade
<!-- index.js -->
<!-- one-more-js-file.js -->
<!-- styles.css -->
<!-- endinject -->


// product.jade
<!-- index.js -->
<!-- file1.css -->
<!-- file2.css -->
<!-- endinject -->

这里正确的解决方案是什么？以及如何编写/修改 gulp 任务以正确注入(inject)具有修订字符串的 Assets (基于生成的 list 文件或以某种方式没有它)？

谢谢。

Answer 1

关于注入(inject)的语法，我认为，应该是一个文件一对，例如

<!-- index.js -->
<script src="index-xxxxxx.js"></script>
<!-- endinject -->

关于为什么它不能正确注入(inject)，那么我认为，你需要先预处理 Jade 文件。对您的测试 HTML 文件尝试相同的方法，它将起作用。但是Gulpjs需要先对Jade进行预处理才能注入(inject)，并且先于Expressjs自己的Jade编译器。 gulp-jade