跨项目文件夹链接css，js文件[重复]答案

【问题标题】：linking css,js file across project folders [duplicate]跨项目文件夹链接css，js文件[重复]
【发布时间】：2018-10-11 14:23:55
【问题描述】：

我有一个 vanilla 项目，我在其中导入了我将要使用的基本框架，例如 js、Bootstrap 等。

我有一个这样的索引文件，

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

如果我要拥有多个 html 文件，例如 bar.html foo.htmlm，我需要在该文件中再次链接所有文件，这将是忙碌的。对此有什么解决方案？如何只导入一次并在所有 .html 文件中使用？

【问题讨论】：

标签： javascript html css

【解决方案1】：

您需要使用Handlebars、EJS 或Swig 等模板引擎。我会从这些建议中推荐 EJS。这些模板引擎有一个您想要使用的称为“部分”的概念。

这是一个关于 EJS partials 的 Stack Overflow 问题。从本质上讲，partials 允许您在模板中使用较小的模板。因此，您可以创建一个名为“header.html”的部分并将其包含多个模板，如“home.html”或“article.html”。

【讨论】：

【解决方案2】：

嗯，我有 2 个选项供您选择

1.使用 GULP

你可以阅读更多关于 gulp here

简而言之，gulp 有助于将不同的模块绑定到一个完整的 HTML 文件中。

假设您有footer.html、header.html，其中包含诸如CSS 和JS 之类的标题信息。

您可以在 gulpfile.js 中定义如何生成最终 HTML 代码和许多其他内容。

我的 gulpfile.js 看起来像这样。所有步骤一目了然

'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。有一个主 index.html，您可以在其中加载所有脚本和 css

有一个容器，您可以在该容器中加载您的 html。在这种情况下，您的 URL 将保持静态，只有内容会改变。

您不需要加载脚本和 CSS，因为它们已经加载。不过有几点需要注意

您需要在所有文件中维护一个唯一的 id，因为 id 可能会发生冲突，css 也是如此。

【讨论】：