Question

我有一个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文件中使用？

Answer 1

您需要使用Handlebars，EJS或Swig等模板引擎。我会建议EJS这些建议。这些模板引擎有一个名为＆＃34; partials＆＃34;你想要使用。

以下是关于EJS partials的Stack Overflow问题。从本质上讲，partials允许您在模板中使用较小的模板。因此，您可以创建一个名为＆＃34; header.html＆＃34;并包含多个模板，例如＆＃34; home.html＆＃34;或＆＃34; article.html。＆＃34;

Answer 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

有一个容器，您可以将htmls加载到该容器中。在这种情况下，您的网址将保持不变，只会更改内容。

你不需要加载scrips和css，因为它们已经加载了。

虽然有一些注意事项

你需要在所有文件中保持一个唯一的id，因为id可能与css发生冲突。

在项目文件夹

2 个答案: