linking css,js file across project folders

Question

I have a vanilla project where I import the basic frameworks I am going to use like js,Bootstrap and others.

I have a index file like so,

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="frameworks/jquery.js"></script>
    <script type="text/javascript" src="frameworks/p5.js"></script>

    <link href="frameworks/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script type="application/javascript" src="frameworks/bootstrap/js/popper.js"></script>
    <script type="application/javascript" src="frameworks/bootstrap/js/bootstrap.js"></script>
</head>
<body>

Hello, foo!

</body>
</html>

If I am going to have multiple html files like, bar.html foo.htmlm I would need to link all the files again in that file which is going to be hectic. What is the solutions for this? How can I just import once and use across all .html files?

score 1 · Answer 1 · answered May 01 '18 at 14:49

You need to use a templating engine like Handlebars, EJS or Swig. I would recommend EJS out of those suggestions. These templating engines have a concept called "partials" that you would want to use.

Here is a Stack Overflow question about EJS partials. Essentially, partials allow you to use smaller templates in your templates. So you can create a partial called "header.html" and include it multiple templates like "home.html" or "article.html."

score 0 · Answer 2 · answered May 01 '18 at 14:57

Well I have 2 options for you

1. Use GULP

you can read more about gulp here

In short gulp helps bind different modules into a complete HTML file.

Lets say you have footer.html, header.html which contains header information such as CSS and JS.

There will be gulpfile.js where you define how you want to generate Final HTML code and many other stuffs.

My gulpfile.js looks like this. All steps are self explanatory

'use strict';

var gulp                   = require('gulp'),
    sass                   = require('gulp-sass'),
    autoprefixer           = require('gulp-autoprefixer'),
    cleanCSS               = require('gulp-clean-css'),
    uglify                 = require('gulp-uglify'),
    pump                   = require('pump'),
    rigger                 = require('gulp-rigger'),
    imagemin               = require('gulp-imagemin'),
    imageminJpegRecompress = require('imagemin-jpeg-recompress'),
    imageminSvgo           = require('gulp-imagemin').svgo,
    imageminPngquant       = require('imagemin-pngquant'),
    browserSync            = require('browser-sync').create(),
    watch                  = require('gulp-watch'),
    del                    = require('del');

var task = {};

var path = {
  build: {
    html: 'dist/',
    stylesheets: 'dist/assets/stylesheets/',
    img: 'dist/assets/images/',
    javascript: 'dist/assets/javascript/',
    fonts: 'dist/assets/fonts/'
  },
  src: {
    html: 'src/*.html',
    stylesheets: 'src/assets/stylesheets/*.scss',
    img: 'src/assets/images/**/*.*',
    javascript: 'src/assets/javascript/**/*.js',
    fonts: 'src/assets/fonts/**/*.*'
  },
  watch: {
    html: 'src/**/*.html',
    stylesheets: 'src/assets/stylesheets/**/*.scss',
    img: 'src/assets/images/**/*.*',
    javascript: 'src/assets/javascript/**/*.js',
    fonts: 'src/assets/fonts/**/*.*'
  }
};

// HTML
gulp.task('html:build', task.html = function () {
  gulp.src(path.src.html)
  .pipe(rigger())
  .pipe(gulp.dest(path.build.html))
  .pipe(browserSync.reload({
    stream: true
  }));
});

//Stylesheets
gulp.task('sass:build', function () {
  return gulp.src(path.src.stylesheets)
  .pipe(sass().on('error', sass.logError))
  .pipe(autoprefixer())
  .pipe(cleanCSS({compatibility: 'ie8'}))
  .pipe(gulp.dest(path.build.stylesheets))
  .pipe(browserSync.reload({
    stream: true
  }));
});

// JAVASCRIPT
gulp.task('javascript:build', task.javascript = function () {
  gulp.src(path.src.javascript)
  .pipe(uglify())
  .pipe(gulp.dest(path.build.javascript))
  .pipe(browserSync.reload({
    stream: true
  }));
});

// FONTS
gulp.task('fonts:build', task.fonts = function () {
  gulp.src(path.src.fonts)
  .pipe(gulp.dest(path.build.fonts))
  .pipe(browserSync.reload({
    stream: true
  }));
});



//Images
gulp.task('img:build', task.img = function () {
  gulp.src(path.src.img)
    .pipe(imagemin([
      imageminJpegRecompress({quality: 'low'}),
      imageminSvgo(),
      imageminPngquant({nofs: true, speed: 1})
    ]))
    .pipe(gulp.dest(path.build.img))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Server
gulp.task('server:build', function() {
  browserSync.init({
    port : 3200,
    server: {
      baseDir: "dist",
      routes: {
        '/node_modules': 'node_modules'
      }
    },
    notify: {
      styles: {
        top: 'auto',
        bottom: '0'
      }
    },
    open: true
  });
});


gulp.task('build', [
  'html:build',
  'sass:build',
  'server:build',
  'img:build',
  'javascript:build',
  'fonts:build'
]);

gulp.task('watch', function () {
  watch([path.watch.stylesheets], function (event, cb) {
    gulp.start('sass:build');
  });
  watch([path.watch.html], function (event, cb) {
    gulp.start('html:build');
  });
  watch([path.watch.img], function (event, cb) {
    gulp.start('img:build');
  });
  watch([path.watch.javascript], function (event, cb) {
    gulp.start('javascript:build');
  });
  watch([path.watch.fonts], function (event, cb) {
    gulp.start('fonts:build');
  });
});

gulp.task('default', ['build', 'watch']);

2. Have a main index.html where you load all scripts and css

Have a container where you load your htmls inside that container. In this case your URL will remain static and only content will change.

you don't need to load scrips and css as they are already loaded. there are some points to note though

you need to maintain a unique id across all files, as id's might clash same goes for css.

linking css,js file across project folders

2 Answers2