Javascript 跨项目文件夹链接css、js文件
我有一个普通的项目，我导入了我将要使用的基本框架，比如js、Bootstrap和其他框架 我有一个这样的索引文件Javascript 跨项目文件夹链接css、js文件,javascript,html,css,Javascript,Html,Css,我有一个普通的项目，我导入了我将要使用的基本框架，比如js、Bootstrap和其他框架 我有一个这样的索引文件 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="frameworks/jquery.js"></script> <script type="text/jav
<!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文件中使用？您需要使用模板引擎，例如，或。在这些建议中，我会推荐EJS。这些模板引擎有一个您想要使用的称为partials的概念
这里有一个关于堆栈溢出的问题。基本上，partials允许您在模板中使用较小的模板。因此，您可以创建一个名为header.html的部分文件，并将其包含在home.html或article.html等多个模板中。我有两个选项供您选择 一,。大口喝 你可以阅读更多关于gulp的内容 简而言之，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']);