fix: 引号保留

feat：添加readme
普通静态页面[包含es6的js，以及scss]
15 changed files with 10250 additions and 4025 deletions
--- a/README.md
+++ b/README.md
@ -2,7 +2,6 @@

 这个demo，主要是为了快速开发纯静态项目。
 利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作
-
 ## 使用

 ```shell
@ -47,4 +46,3 @@ npm run build
 4. 压缩html、css
 5. scss转换为css
 6. es6转义
-
--- a/gulpfile.js
+++ b/gulpfile.js
@ -6,11 +6,17 @@ 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({
@ -36,11 +42,16 @@ gulp.task("html", function () {
  return gulp
    .src("src/*.html")
    .pipe(fileinclude()) //替换头部底部
-    .pipe(minifyHtml()) //执行压缩
+    .pipe(minifyHtml({quotes:true})) //执行压缩
    .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")
@ -58,14 +69,41 @@ gulp.task("clean", function () {

 gulp.task("watchs", function () {
  gulp.watch("src/*.html", gulp.series("html"));
-  gulp.watch("src/static/css/*.css", gulp.series("css"));
+  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",
-    gulp.parallel("html", "css"),
+    "scss",
+    gulp.parallel("html","lib","script", "css"),
    gulp.parallel("connect", "watchs")
  )
 );
@ -74,6 +112,7 @@ gulp.task(
  "build",
  gulp.series(
    "clean",
-    gulp.parallel("html", "css")
+    "scss",
+    gulp.parallel("html","lib","script", "css")
  )
 );
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,9 +1,10 @@
 {
-  "name": "gulp-static-html-demo",
+  "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"
  },
@ -20,16 +21,23 @@
  "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"
+    "gulp-rename": "^2.0.0",
+    "webpack-stream": "^7.0.0"
  },
  "dependencies": {
-    "gulp-cli": "^2.3.0"
+    "gulp-cli": "^2.3.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "sass": "^1.51.0"
  }
 }
--- a/src/index.html
+++ b/src/index.html
@ -1,15 +1,23 @@
 <!DOCTYPE html>
 <html lang="zh">
-
-<head>
+  <head>
    @@include('./tpl/header.html')
-</head>
+    <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>
+  <body>
+    @@include('./tpl/nav.html')
    <section>
-        @@include('./tpl/empty.html')
+      <svg id="markmap" class="markmap-svg"></svg>
    </section>
    @@include('./tpl/footer.html')
-</body>
-
+  </body>
 </html>
--- a/src/static/css/common.css
+++ b/src/static/css/common.css
@ -1,35 +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: #171a2e;
-}

-.empty-box{
-  width: 400px;
-  height: 100vh;
-  margin: 0 auto;
+a:link, a:visited, a:hover, a:active {
+  text-decoration: none;
+  color: #5bbe8e;
 }

 /* 底部 */
 .footer-box {
  display: flex;
  justify-content: center;
-  height: 60px;
-  background-color: #171a2e;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30px;
+  background-color: #5bbe8e;
 }

 .footer-box .content {
-  margin-top: 20px;
-  font-size: 14px;
+  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;
+}
--- a/src/static/css/variable.css
+++ b/src/static/css/variable.css
@ -0,0 +1,4 @@
+@charset "UTF-8";
+/* 背景颜色 */
+/* 字体 */
+/*普通字体颜色*/
--- a/src/static/js/index.js
+++ b/src/static/js/index.js
@ -0,0 +1 @@
+
--- a/src/static/js/main.js
+++ b/src/static/js/main.js
--- a/src/static/lib/demo.js
+++ b/src/static/lib/demo.js
@ -0,0 +1 @@
+// 无需转换
--- a/src/static/scss/common.scss
+++ b/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;
+      }
+  }
+}
+
--- a/src/static/scss/variable.scss
+++ b/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;
--- a/src/tpl/empty.html
+++ b/src/tpl/empty.html
--- a/src/tpl/nav.html
+++ b/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>
+  
--- a/webpack/webpack.config.js
+++ b/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'
+	},
+
+}
Author	SHA1	Message	Date
彭翩	a8d1202213	fix: 引号保留	9 months ago
ppst	810c7c973f	feat：添加readme	1 year ago
ppst	ea72e02f3d	普通静态页面[包含es6的js，以及scss]	2 years ago