Gulp工作流（boostrap、scss、jquery）。如何将html文件导入index.html？_Gulp

Gulp工作流（boostrap、scss、jquery）。如何将html文件导入index.html？

gulp

Gulp工作流（boostrap、scss、jquery）。如何将html文件导入index.html？,gulp,Gulp,我正在尝试使用Gulp（boostrap、scss、jquery、js）执行工作流这个想法： In src/assets/css take vendors (@import "node_modules/bootstrap/scss/bootstrap";) convert and minify css to public/css---main.min.css. In src/assets/app with gulp import ( "node_modules/jquery/dist/j

我正在尝试使用Gulp（boostrap、scss、jquery、js）执行工作流

这个想法：

In src/assets/css take vendors (@import "node_modules/bootstrap/scss/bootstrap";) convert and minify css to public/css---main.min.css.
In src/assets/app with gulp import



( "node_modules/jquery/dist/jquery.js","node_modules/bootstrap/dist/js/bootstrap.js","src/assets/js/**/*.js)"

并在public/assets/app中进行转换/缩小

src目录上的每一个更改都会反映到public。所有更改都正常工作。我要包括/导入的所有文件来自：

 src
  |
  |
includes/---html/files

to src
    |
    |
  index.html

example:
src/includes/header.html (<h1> hello </h1>)
import to my src/index.html

like --> @@include("header.html")

src
|
|
包括/--html/文件
至src
|
|
index.html
例子：
src/includes/header.html（您好）
导入到my src/index.html
类似-->@@include（“header.html”）

只需要包含文件中的文本（动态加载样式和js）我的结构可能吗

src/index.html ->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
  <link rel="stylesheet" href="assets/css/main.min.css">
</head>

<body>
  <button class='btn btn-success btn-block p-3 text-center w-25 mx-auto mt-2' id='btn'> CLICK </button>

 <div class='p-2 d-block element1 mr-5 m-2'>css-test1</div>
 <div class='p-2 d-inline element2 mx-5 bg-dark' >css-test2</div>
</body>

<script src="assets/js/app.js"></script>

</html>

gulpfile.js -->

const gulp = require("gulp"),
  browserSync = require("browser-sync").create(),
  sass = require("gulp-sass"),
  autoprefixer = require("gulp-autoprefixer"),
  cleanCSS = require("gulp-clean-css"),
  rename = require("gulp-rename"),
  newer = require("gulp-newer"),
  purgecss = require("gulp-purgecss"),
  concat = require("gulp-concat"),
  uglify = require("gulp-uglify"),
  size = require("gulp-size"),
  imagemin = require("gulp-imagemin");


function css() {
  return gulp
    .src("./src/assets/css/main.scss")
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS({ compatibility: "ie8" }))
    .pipe(
      rename(function(path) {
        path.extname = ".min.css";
      })
    )
    .pipe(
      purgecss({
        content: ["./src/**/*.html"]
      })
    )
    .pipe(gulp.dest("./public/assets/css"))
    .pipe(browserSync.stream());
};

function js() {
  return gulp
    .src([
      "node_modules/jquery/dist/jquery.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "src/assets/js/**/*.js"
    ])
    .pipe(concat({ path: "app.js", stat: { mode: 0666 } }))
    .pipe(uglify())
    .pipe(gulp.dest("./public/assets/js"))
    .pipe(browserSync.stream());
};

function html() {
  return gulp.src("./src/**/*.html").pipe(gulp.dest("./public"));
}



function serve() {
  browserSync.init({
    server: {
      baseDir: "./public"
    }
  });
}

const dir = {
  src: "src/",
  build: "public/"
};

const imgConfig = {
  src: dir.src + "images/**/*",
  build: dir.build + "images/",
  minOpts: {
    optimizationLevel: 5
  }
};

function images() {
  return gulp
    .src(imgConfig.src)
    .pipe(newer(imgConfig.build))
    .pipe(imagemin(imgConfig.minOpts))
    .pipe(size({ showFiles: true }))
    .pipe(gulp.dest(imgConfig.build));
}


function customSync(){

  css()
  browserSync.reload();
}

gulp.watch("./src/*.html", html).on("change", customSync);
gulp.watch("./src/assets/css/**/*.scss", css);
gulp.watch("./src/assets/js/**/*.js", js);
gulp.watch("./src/images/**/*", images);

exports.default = gulp.parallel(html, css, js, images, serve);

src/index.html->
试验
点击
css-test1
css-test2
gulpfile.js-->
const gulp=需要（“gulp”），
browserSync=require（“浏览器同步”）.create（），
sass=需要（“吞咽sass”），
autoprefixer=需要（“吞下autoprefixer”），
cleanCSS=需要（“吞下干净的css”），
重命名=需要（“吞咽重命名”），
更新=需要（“吞咽更新”），
purgecss=require（“吞咽purgecss”），
concat=需要（“吞咽concat”），
uglify=需要（“吞咽uglify”），
尺寸=要求（“吞咽尺寸”），
imagemin=需要（“吞咽imagemin”）；
函数css（）{
回灌
.src（“/src/assets/css/main.scss”）
.pipe（sass（））
.pipe（autoprefixer（））
.pipe（cleanCSS（{兼容性：“ie8”}））
.烟斗(
重命名（函数（路径）{
path.extname=“.min.css”；
})
)
.烟斗(
净化({
内容：[“/src/***.html”]
})
)
.pipe（大口目的地（“/public/assets/css”））
.pipe（browserSync.stream（））；
};
函数js（）{
回灌
.src([
“node_modules/jquery/dist/jquery.js”，
“node_modules/bootstrap/dist/js/bootstrap.js”，
“src/assets/js/***.js”
])
.pipe（concat（{path:app.js”，stat:{mode:0666}））
.管道（丑（）
.pipe（大口目的地（“/public/assets/js”））
.pipe（browserSync.stream（））；
};
函数html（）{
返回gulp.src（“./src/***.html”）.pipe（gulp.dest（“./public”）；
}
函数serve（）{
browserSync.init({
服务器：{
baseDir:“/公共”
}
});
}
常数dir={
src:“src/”，
构建：“public/”
};
常数imgConfig={
src:dir.src+“images/****”，
build:dir.build+“images/”，
minOpts：{
优化级别：5
}
};
函数图像（）{
回灌
.src（imgConfig.src）
.pipe（较新的（imgConfig.build））
.管道（图像最小值（图像配置最小值））
.pipe（大小（{showFiles:true}））
.管道（吸入目的地（imgConfig.build））；
}
函数customSync（）{
css（）
重新加载（）；
}
gulp.watch（“./src/*.html”，html）.on（“change”，customSync）；
狼吞虎咽的手表（“./src/assets/css/***.scss”，css）；
狼吞虎咽的手表（“./src/assets/js/***.js”，js）；
狼吞虎咽的手表（“./src/images/***”，images）；
exports.default=gulp.parallel（html、css、js、图像、服务）；

链接到my reppo-->

请不要在标题上添加“已解决”。如果你真的自己解决了，并且有了答案，那么就把它贴出来。你也可以给其他人留下回答的机会。如果是由于打字错误或任何其他不可复制的错误，那么请安全地删除您的帖子。在构建过程中加入一个模板引擎，如nunjucks，并对html进行模块化。

src/index.html ->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
  <link rel="stylesheet" href="assets/css/main.min.css">
</head>

<body>
  <button class='btn btn-success btn-block p-3 text-center w-25 mx-auto mt-2' id='btn'> CLICK </button>

 <div class='p-2 d-block element1 mr-5 m-2'>css-test1</div>
 <div class='p-2 d-inline element2 mx-5 bg-dark' >css-test2</div>
</body>

<script src="assets/js/app.js"></script>

</html>

gulpfile.js -->

const gulp = require("gulp"),
  browserSync = require("browser-sync").create(),
  sass = require("gulp-sass"),
  autoprefixer = require("gulp-autoprefixer"),
  cleanCSS = require("gulp-clean-css"),
  rename = require("gulp-rename"),
  newer = require("gulp-newer"),
  purgecss = require("gulp-purgecss"),
  concat = require("gulp-concat"),
  uglify = require("gulp-uglify"),
  size = require("gulp-size"),
  imagemin = require("gulp-imagemin");


function css() {
  return gulp
    .src("./src/assets/css/main.scss")
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS({ compatibility: "ie8" }))
    .pipe(
      rename(function(path) {
        path.extname = ".min.css";
      })
    )
    .pipe(
      purgecss({
        content: ["./src/**/*.html"]
      })
    )
    .pipe(gulp.dest("./public/assets/css"))
    .pipe(browserSync.stream());
};

function js() {
  return gulp
    .src([
      "node_modules/jquery/dist/jquery.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "src/assets/js/**/*.js"
    ])
    .pipe(concat({ path: "app.js", stat: { mode: 0666 } }))
    .pipe(uglify())
    .pipe(gulp.dest("./public/assets/js"))
    .pipe(browserSync.stream());
};

function html() {
  return gulp.src("./src/**/*.html").pipe(gulp.dest("./public"));
}



function serve() {
  browserSync.init({
    server: {
      baseDir: "./public"
    }
  });
}

const dir = {
  src: "src/",
  build: "public/"
};

const imgConfig = {
  src: dir.src + "images/**/*",
  build: dir.build + "images/",
  minOpts: {
    optimizationLevel: 5
  }
};

function images() {
  return gulp
    .src(imgConfig.src)
    .pipe(newer(imgConfig.build))
    .pipe(imagemin(imgConfig.minOpts))
    .pipe(size({ showFiles: true }))
    .pipe(gulp.dest(imgConfig.build));
}


function customSync(){

  css()
  browserSync.reload();
}

gulp.watch("./src/*.html", html).on("change", customSync);
gulp.watch("./src/assets/css/**/*.scss", css);
gulp.watch("./src/assets/js/**/*.js", js);
gulp.watch("./src/images/**/*", images);

exports.default = gulp.parallel(html, css, js, images, serve);