2

我有一个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 文件中定义为带有修订字符串的资产？

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

方法一

每次都使用相同的翡翠模板，并以某种方式在每个 .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 任务以正确注入具有修订字符串的资产（基于生成的清单文件或以某种方式没有它）？

谢谢你。

4

1 回答 1

0

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

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

至于为什么它没有正确注入，那么我认为，你需要先预处理 Jade 文件。对您的测试 HTML 文件尝试相同的方法，它会起作用。但是 Gulpjs 需要先对 Jade 进行预处理才能注入，并且在 Expressjs 自己的 Jade 编译器之前。吞玉

于 2015-11-03T06:52:20.233 回答