Node.js 如何使用gulp inject将修改后的资产正确注入到jade模板中?

Node.js 如何使用gulp inject将修改后的资产正确注入到jade模板中?,node.js,express,pug,gulp,gulp-inject,Node.js,Express,Pug,Gulp,Gulp Inject,我有一个带有express中间件的node.js应用程序。静态页面使用jadetemplate引擎生成,并根据请求使用res.render(“template name.jade”)呈现 SASS和javascript文件被缩小并分别放在/build/js和/build/css文件夹中 另外,将gulp与gulp rev一起使用,在创建清单文件时,每个文件的名称都会附加一个修订字符串。以下任务代码用于javascript文件: gulp.task( "prepare_js", function(

我有一个带有
express
中间件的
node.js
应用程序。静态页面使用
jade
template引擎生成,并根据请求使用
res.render(“template name.jade”)呈现

SASSjavascript文件被缩小并分别放在
/build/js
/build/css
文件夹中

另外,将
gulp
gulp rev
一起使用,在创建清单文件时,每个文件的名称都会附加一个修订字符串。以下任务代码用于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") )
});
任务生成最大的文件,如:

{
    "index.js": "index-d41d8cd9.js"
}
类似的任务应该是将sass编译为css

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

我看到了两种主要的解决方法

方法1 每次使用相同的jade模板,并在每个.jade文件中定义应该注入的文件(基于原始文件,不附带修订字符串,文件名)。然后搜索上一次任务运行留下的行,并将它们替换为新的行,具有新的修订字符串

例如,假设我们有两个文件。它们中的每一个都可以使用公共资产,也可以使用某些特定资产

// 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")
这应该告诉gulp inject,应该将特定行更改为包含具有新修订字符串的文件的新行

方法2 有两个模板文件夹,一个包含所有模板源,另一个在运行注入任务后包含模板。Express应用程序将文件夹2指向一个plase以获取静态数据

在第一个文件夹下的所有模板中,只需添加注释即可插入哪个文件,如下所示:

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


// product.jade
<!-- index.js -->
<!-- file1.css -->
<!-- file2.css -->
<!-- endinject -->
//index.jade
//玉石制品
这里的正确解决方案是什么?以及如何编写/修改gulp任务,以正确地注入具有修订字符串的资产(基于生成的清单文件或以某种方式没有修订字符串的资产)


谢谢。

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

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

关于它为什么不能正确注入,我认为,您需要先预处理Jade文件。对测试HTML文件尝试相同的方法,它会起作用。但是Gulpjs需要先对Jade进行预处理以进行注入,然后再进行Expressjs自己的Jade编译器

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