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

问题描述

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

Structure:

  -node_modules  

    -public
     |-------assets 
     |       |  |  |
     |       |  | css---main.min.css
     |       |  js---app.js
     |     Images
     | 
    index.html

    -src
     |-------assets 
     |       |  |  |
     |       |  | css------------files
     |       |  js---app.js       |  |
     |     Images                 |  custom.scss
     |                          vendors.scss 
     | 
    index.html

   -gulpfile.js    -package.json`enter code here`    -package-lock.json

想法：

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.All 工作正常。我想从以下位置包含/导入文件：

 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")

只需要包含文件中的文本（动态加载的样式和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);

链接到我的 repo --> https://github.com/Markov88/gulp-workflow-bootstrap-scss-js-

标签： gulp

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

问题描述

解决方案

推荐阅读