如何解决在开发时Gulp注入不注入局部 HTML gulpfile.js
我正在使用gulp-inject将部分HTML注入到网页中，当构建到dist文件夹时可以使用，但是在开发文件夹（即src）中不可用被注入。我在其他帖子中找不到想要的答案，因此我将其发布。牢记我正在使用dist服务这些页面，如何在src和browserSync这两个文件夹中使用它？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width,initial-scale=1.0" name="viewport" />
<title>Excellence</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site-wrapper">
<div id="site-container">
<!-- inject:header:html -->
<!-- endinject -->
<main class="site-content">
<section>
<h2>Civil with excellence</h2>
<p>Content here...</p>
</section>
</main>
<footer id="site-footer">
<p>©2020 Holdings,all rights reserved.</p>
</footer>
</div>
</div>
</body>
<script src="scripts/main.js"></script>
</html>
gulpfile.js
const gulp = require('gulp');
const noop = require('gulp-noop');
const newer = require('gulp-newer');
const imagemin = require('gulp-imagemin');
const htmlclean = require('gulp-htmlclean');
const concat = require('gulp-concat');
const deporder = require('gulp-deporder');
const terser = require('gulp-terser');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const postcssassets = require('postcss-assets');
const autoprefixer = require('autoprefixer');
const mqpacker = require('css-mqpacker');
const cssnano = require('cssnano');
const uglify = require('gulp-uglify');
const browsersync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const useref = require('gulp-useref');
const inject = require('gulp-inject');
const del = require('del');
const devBuild = process.env.NODE_ENV !== 'production';
function clean() {
return del.sync('dist');
}
function assets() {
return gulp
.src('./src/assets/**/*')
.pipe(newer('./dist/assets'))
.pipe(imagemin({ optimizationLevel: 5 }))
.pipe(gulp.dest('dist/assets'));
}
function styles() {
return gulp
.src('./src/styles/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error',sass.logError))
.pipe(postcss([autoprefixer(),cssnano()]))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/styles'))
.pipe(gulp.dest('dist/styles'))
.pipe(browsersync.stream());
}
function scripts() {
return gulp
.src('./src/scripts/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/scripts'));
}
function views() {
return gulp
.src(['./src/**/*.html','!./src/partials/**'],{ read: false })
.pipe(
inject(gulp.src(['./src/partials/header.html']),{ // <--- Where I'm having problems.
starttag: '<!-- inject:header:{{ext}} -->',transform: function (filePath,file) {
return file.contents.toString('utf8');
},})
)
.pipe(gulp.dest('dist'));
}
function watchDev() {
browsersync.init({
server: { baseDir: 'src' },port: 8800,});
gulp.watch('./src/assets/**/*',assets);
gulp.watch('./src/scripts/**/*.js',scripts);
gulp.watch('./src/styles/**/*.scss',styles);
gulp.watch('./src/**/*.html').on('change',browsersync.reload);
}
function watchBuild() {
browsersync.init({
server: { baseDir: 'dist' },port: 8900,browsersync.reload);
}
exports.styles = styles;
exports.assets = assets;
exports.scripts = scripts;
exports.views = views;
exports.watchDev = watchDev;
exports.watchBuild = watchBuild;
exports.clean = clean;
let dev = gulp.parallel(assets,styles,scripts,views,watchDev);
let build = gulp.parallel(assets,watchBuild);
exports.start = gulp.series(dev,watchDev);
exports.prod = gulp.series(build,watchBuild);
gulp.task('default',build);
gulp.task('clean:dist',clean);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。