Question

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

进行呈现将

SASS 和 javascript 文件缩小并分别放在/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") )
});

任务生成如：

的manigest文件

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

类似的任务应该用于编译sass到css。

静止是如何正确地（在该任务中或作为单独的任务）使用gulp-inject来在每个.jade文件中仅查找和替换该.jade文件中定义的资产与具有修订字符串的资产？

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

方法1

每次使用相同的jade模板，并以某种方式在每个.jade文件中定义应该注入哪个文件（基于原始文件，没有附加修订字符串，文件名）。然后搜索上一个任务运行中剩下的行，并用新的修改字符串替换它们。

例如，假设我们有2个文件。他们每个人都可以使用共同的资产，以及一些特定的资产。

// 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任务中留下的修订字符串。在我们的示例中，可以更改上面的文件以添加注入的注释，如：

// 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

有两个模板文件夹，一个包含所有模板源，另一个在运行注入任务后使用模板。 Express应用程序将指向文件夹2作为从中获取静态的平台。

在第一个文件夹下的所有模板中，只需添加注释应该注入的文件，如下所示：

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


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

这里的解决方案是什么？以及如何编写/修改gulp任务以正确地注入具有修订字符串的资产（基于生成的清单文件或以某种方式没有它）？

谢谢。

Answer 1

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

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

关于为什么它没有正确注入，我想，你需要先预处理Jade文件。尝试使用与测试HTML文件相同的方法，它将起作用。但是Gulpjs需要先预先处理Jade注射，然后才能使用Expressjs＆＃39;自己的Jade编译器。 gulp-jade

如何使用gulp-inject正确地将修改后的资产注入到jade模板中？

方法1

方法2

1 个答案: