Chito Cheng Chito Cheng - 1 year ago 75
Node.js Question

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

I am using assemble to generate from html files with a common layout files. I want to include the corresponding css and javascript file with different pages. So that, for index.html, only index.css and index.js are included, and for about-us.html, only about-us.css and about-us.js are included.

Here's my respository on github

Answer Source

If you are already using gulp then use gulp-inject to inject the html files with their respective dependencies based on injection tags.

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 + ' -->'

In your index.html:



In your about-us.html:



Call the function above in any gulp task. You can filter with gulp-if and call the function with the specific starttag. i.e.:

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

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

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

    return gulp
        .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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download