普通静态页面[包含es6的js，以及scss]

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

gulpfile.js

@@ -0,0 +1,118 @@
+var gulp = require("gulp");
+var connect = require("gulp-connect");
+
+var minifyHtml = require("gulp-minify-html"); //压缩html
+
+var rename = require("gulp-rename"); //重命名
+var minifyCss = require("gulp-minify-css"); //压缩CSS
+var autoprefixer = require("gulp-autoprefixer");
+var scssToCss  = require("gulp-sass")(require('sass')); //scss to css
+
+var clean = require("gulp-clean");
+
+var fileinclude = require("gulp-file-include");
+
+
+var babel = require('gulp-babel');
+var webpack = require('webpack-stream');
+var sourceMap = require('gulp-sourcemaps');
+var webpackConfig = require ("./webpack/webpack.config.js");
+// 创建
+gulp.task("connect", function () {
+  connect.server({
+    root: "dist", //根目录
+    livereload: true, //自动更新
+    port: 9909, //端口
+  });
+});
+
+gulp.task("fileinclude", function () {
+  // 适配page中所有文件夹下的所有html，排除src下的tpl文件夹中html
+  gulp
+    .src(["src/*.html", "!src/tpl/**.html"])
+    .pipe(
+      fileinclude({
+        prefix: "@@",
+        basepath: "@file",
+      })
+    )
+    .pipe(gulp.dest("dist"));
+});
+gulp.task("html", function () {
+  return gulp
+    .src("src/*.html")
+    .pipe(fileinclude()) //替换头部底部
+    .pipe(minifyHtml()) //执行压缩
+    .pipe(gulp.dest("dist"))
+    .pipe(connect.reload());
+});
+gulp.task("scss", function () {
+  return gulp
+  .src("src/static/scss/*.scss")
+  .pipe(scssToCss())//编译scss
+  .pipe(gulp.dest("src/static/css/"))
+});
+gulp.task("css", function () {
+  return gulp
+    .src("src/static/css/*.css")
+    .pipe(autoprefixer("last 15 version", "ie 8"))
+    .pipe(rename({ suffix: "" })) //rename压缩后的文件名
+    .pipe(minifyCss()) //执行压缩
+    .pipe(gulp.dest("dist/static/css/"))
+    .pipe(connect.reload()); //更新;
+});
+
+// 清空dist文件夹
+gulp.task("clean", function () {
+  return gulp.src(["dist/*"]).pipe(clean());
+});
+
+gulp.task("watchs", function () {
+  gulp.watch("src/*.html", gulp.series("html"));
+  gulp.watch("src/tpl/*.html", gulp.series("html"));
+  gulp.watch("src/static/scss/*.scss", gulp.series(
+    "scss",
+    gulp.parallel("css")
+  ));
+  gulp.watch("src/static/js/*.js", gulp.series("script"));
+  gulp.watch("gulpfile.js", gulp.series("default"));
+});
+
+
+
+gulp.task('script', () => {
+  return gulp.src('src/static/js/*.js')
+  .pipe( sourceMap.init() )
+  .pipe(babel({
+    presets: ['@babel/preset-env']
+  }))
+  .pipe(webpack(webpackConfig))
+  .pipe(sourceMap.write()) 
+  .pipe(gulp.dest('dist/static/js/'))
+  .pipe(connect.reload()); //更新;
+  });
+
+  gulp.task("lib", function () {
+    return gulp
+      .src("src/static/lib/*.js")
+      .pipe(gulp.dest("dist/static/lib/"))
+      .pipe(connect.reload()); //更新;
+  });
+gulp.task(
+  "default",
+  gulp.series(
+    "clean",
+    "scss",
+    gulp.parallel("html","lib","script", "css"),
+    gulp.parallel("connect", "watchs")
+  )
+);
+
+gulp.task(
+  "build",
+  gulp.series(
+    "clean",
+    "scss",
+    gulp.parallel("html","lib","script", "css")
+  )
+);

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "glup-static-html-demo-es6-scss",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "script": "node --max_old_space_size=8096 node_modules/gulp-cli/bin/gulp.js script",
+    "serve": "node --max_old_space_size=8096 node_modules/gulp-cli/bin/gulp.js",
+    "build": "node --max_old_space_size=8096 node_modules/gulp-cli/bin/gulp.js build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://git.ppst.top/gulp-static-html-demo.git"
+  },
+  "keywords": [
+    "static",
+    "html",
+    "blog",
+    "theme"
+  ],
+  "author": "ppst",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean": "^0.4.0",
+    "gulp-connect": "^5.7.0",
+    "gulp-file-include": "^2.3.0",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-minify-html": "^1.0.6",
+    "gulp-rename": "^2.0.0",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "gulp-cli": "^2.3.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "sass": "^1.51.0"
+  }
+}

src/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    @@include('./tpl/header.html')
+    <script src="./static/lib/d3@6.js"></script>
+    <script src="./static/lib/markmap-view.js"></script>
+    <script src="./static/js/main.js"></script>
+    <style>
+      .markmap-svg{
+        width: calc(100vw - 40px);
+        height: calc(100vh - 66px);
+      }
+    </style>
+  </head>
+
+  <body>
+    @@include('./tpl/nav.html')
+    <section>
+      <svg id="markmap" class="markmap-svg"></svg>
+    </section>
+    @@include('./tpl/footer.html')
+  </body>
+</html>

src/static/css/common.css

@@ -0,0 +1,96 @@
+@charset "UTF-8";
+/* 背景颜色 */
+/* 字体 */
+/*普通字体颜色*/
+/* 重置样式 */
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+a:link, a:visited, a:hover, a:active {
+  text-decoration: none;
+  color: #5bbe8e;
+}
+
+/* 底部 */
+.footer-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30px;
+  background-color: #5bbe8e;
+}
+
+.footer-box .content {
+  font-size: 12px;
+  color: #fff;
+}
+
+/* 头部 */
+.header {
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  color: #5bbe8e;
+  box-shadow: 0 4px 4px #f9f9fc;
+}
+.header .box {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 10%;
+}
+.header .box .logo {
+  font-size: 16px;
+}
+.header .box a:link, .header .box a:visited, .header .box a:hover, .header .box a:active {
+  color: #5bbe8e;
+}
+.header .opr-box {
+  display: flex;
+  align-items: center;
+  color: #5bbe8e;
+}
+.header .opr-box .item {
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+/* 内容 */
+/* 弹层 */
+.mark-box {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+.mark-box .dialog-box {
+  width: 30%;
+  height: 400px;
+  background-color: #fff;
+  border: 1px solid #f9f9fc;
+  border-radius: 10px;
+}
+
+.show-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.hide-dialog {
+  display: none;
+}

src/static/css/variable.css

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+/* 背景颜色 */
+/* 字体 */
+/*普通字体颜色*/

src/static/js/index.js

@@ -0,0 +1 @@
+

src/static/lib/demo.js

@@ -0,0 +1 @@
+// 无需转换

src/static/scss/common.scss

@@ -0,0 +1,65 @@
+@import "variable.scss";
+
+/* 重置样式 */
+html {
+    font-family: sans-serif;
+    font-size: $common-font-size;
+  }
+  body {
+    margin: 0;
+    padding: 0;
+  }
+  a:link,a:visited,a:hover,a:active {
+    text-decoration: none;
+    color: $common-font-color;
+  }
+  
+/* 底部 */
+.footer-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30px;
+  background-color:#5bbe8e;;
+}
+
+.footer-box .content {
+  font-size: $small-font-size;
+  color: #fff;
+}
+
+
+/* 头部 */
+.header{
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  color: $common-font-color;
+  box-shadow: 0 4px 4px #f9f9fc;
+  .box{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 10%;
+    .logo {
+        font-size: 16px;
+    }
+    a:link,a:visited,a:hover,a:active {
+        color: $common-font-color;
+    }
+  }
+  .opr-box{
+    display: flex;
+    align-items: center;
+    color: $common-font-color;
+    .item{
+        font-size: $medium-font-size;
+        margin-right: 10px;
+      }
+  }
+}
+

src/static/scss/variable.scss

@@ -0,0 +1,15 @@
+/* 背景颜色 */
+
+$body-bg-color: #fff;
+$footer-bg-color:#5bbe8e;
+
+/* 字体 */
+
+$common-font-size:14px;
+$big-font-size:24px;
+$medium-font-size:16px;
+$small-font-size:12px;
+$mini-font-size:8px;
+
+$common-font-color:#5bbe8e;/*普通字体颜色*/
+$footer-color:#fff;

src/tpl/footer.html

@@ -0,0 +1,3 @@
+<footer class="footer-box">
+    <div class="content">ppst Copyright ©</div>
+</footer>

src/tpl/header.html

@@ -0,0 +1,5 @@
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>gulp-static-html-demo</title>
+<link rel="stylesheet" type="text/css" href="./static/css/common.css" />

src/tpl/nav.html

@@ -0,0 +1,10 @@
+<header class="header">
+    <div class="box">
+      <div class="logo item"><a href="/">MARKMAP</a></div>
+      <div class="opr-box">
+        <div class="item open-new-dialog" type="new">新建目录</div>
+        
+      </div>
+    </div>
+  </header>
+  

webpack/webpack.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	entry: {
+		main: './src/static/js/main.js',
+		index: './src/static/js/index.js'
+	},
+	output: {
+		filename: '[name].js',
+		path: __dirname + '/dist'
+	},
+
+}