如何在 assemble 布局中包含相应的 css 和 javascript 页面

Question

我正在使用 assemble 从 html 文件生成具有通用布局文件的文件。我想在不同的页面中包含相应的 css 和 javascript 文件。因此，对于index.html，仅包括index.css和index.js，对于about-us.html，仅包括about-us.css和about-us.js 都包括在内。

这是我在 github https://github.com/xchitox/assemble-gulp-test

上的存储库

Answer 1

如果您已经在使用 gulp，则使用 gulp-inject 注入 html 文件及其基于注入标签的各自依赖项。

function injectStartingTag(filepath, starttag) {

    var inject = require('gulp-inject');

    // Injects the source using relative paths
    return inject(gulp.src(filepath, {
        read: false
    }), {
        relative: true,
        starttag: '<!-- ' + starttag + ' -->'
    });
}

在你的 index.html:

<!--inject:index:css-->
<!--endinject-->

<!--inject:index:js-->
<!--endinject-->

在你的关于-us.html:

<!--inject:about-us:css-->
<!--endinject-->

<!--inject:about-us:js-->
<!--endinject-->

在任何 gulp 任务中调用上述函数。您可以使用 gulp-if 进行过滤并使用特定的起始标记调用该函数。即：

gulp.task('Inject', function(){

    var _if = require('gulp-if');

    var all_your_files = "**/*.*"; // obvously only add html, js, and css files

    return gulp
        .src(all_your_files)
        .pipe(_if('index.html', injectStartingTag('index.css', 'inject:index:css')))
        .pipe(_if('about-us.html', injectStartingTag('about-us.css', 'inject:about-us:css')))
        ...
        ...
        // you get the idea
});

Answer 2

您可以使用助手根据当前视图的文件名生成 link 资产：

app.helper('filename', function() {
  // this.view is the current view being rendered
  return this.view.stem; // just get the basename without extension
});

现在您可以使用它在您的布局中添加资产路径：

<link rel="stylesheet" href="/assets/css/{{filename}}.css">
<script src="/assets/js/{{filename}}.js"></script>

如何在 assemble 布局中包含相应的 css 和 javascript 页面

How to include corresponding css and javascript of the page in assemble layout

templates

node.js

assemble

gulp