pp
/
gulp-static-html
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: pp:scss
Branches Tags
pp:2024
pp:es6-scss
pp:px2rem
pp:common
pp:scss
..
compare: pp:es6-scss
Branches Tags
pp:2024
pp:es6-scss
pp:px2rem
pp:common
pp:scss

3 Commits
scss ... es6-scss

Author SHA1 Message Date
彭翩 a8d1202213 fix: 引号保留 9 months ago
ppst 810c7c973f feat：添加readme 1 year ago
ppst ea72e02f3d 普通静态页面[包含es6的js，以及scss] 2 years ago
15 changed files with 9988 additions and 4259 deletions
Show Stats

7
README.md
Unescape Escape View File

@ -2,6 +2,13 @@
这个demo，主要是为了快速开发纯静态项目。 这个demo，主要是为了快速开发纯静态项目。
利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作 利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作
## 使用
```shell
npm install
npm run dev
npm run build
```
## 分支：common ## 分支：common
普通静态页面 普通静态页面

38
gulpfile.js
Unescape Escape View File

@ -4,14 +4,19 @@ var connect = require("gulp-connect");
var minifyHtml = require("gulp-minify-html"); //压缩html var minifyHtml = require("gulp-minify-html"); //压缩html
var rename = require("gulp-rename"); //重命名 var rename = require("gulp-rename"); //重命名
var scssToCss = require("gulp-sass")(require('sass')); //scss to css
var minifyCss = require("gulp-minify-css"); //压缩CSS var minifyCss = require("gulp-minify-css"); //压缩CSS
var autoprefixer = require("gulp-autoprefixer"); var autoprefixer = require("gulp-autoprefixer");
var scssToCss = require("gulp-sass")(require('sass')); //scss to css
var clean = require("gulp-clean"); var clean = require("gulp-clean");
var fileinclude = require("gulp-file-include"); 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 () { gulp.task("connect", function () {
connect.server({ connect.server({
@ -37,11 +42,10 @@ gulp.task("html", function () {
return gulp return gulp
.src("src/*.html") .src("src/*.html")
.pipe(fileinclude()) //替换头部底部 .pipe(fileinclude()) //替换头部底部
.pipe(minifyHtml()) //执行压缩 .pipe(minifyHtml({quotes:true})) //执行压缩
.pipe(gulp.dest("dist")) .pipe(gulp.dest("dist"))
.pipe(connect.reload()); .pipe(connect.reload());
}); });
gulp.task("scss", function () { gulp.task("scss", function () {
return gulp return gulp
.src("src/static/scss/*.scss") .src("src/static/scss/*.scss")
@ -65,18 +69,41 @@ gulp.task("clean", function () {
gulp.task("watchs", function () { gulp.task("watchs", function () {
gulp.watch("src/*.html", gulp.series("html")); gulp.watch("src/*.html", gulp.series("html"));
gulp.watch("src/tpl/*.html", gulp.series("html"));
gulp.watch("src/static/scss/*.scss", gulp.series( gulp.watch("src/static/scss/*.scss", gulp.series(
"scss", "scss",
gulp.parallel("css") 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( gulp.task(
"default", "default",
gulp.series( gulp.series(
"clean", "clean",
"scss", "scss",
gulp.parallel("html", "css"), gulp.parallel("html","lib","script", "css"),
gulp.parallel("connect", "watchs") gulp.parallel("connect", "watchs")
) )
); );
@ -85,6 +112,7 @@ gulp.task(
"build", "build",
gulp.series( gulp.series(
"clean", "clean",
gulp.parallel("html", "css") "scss",
gulp.parallel("html","lib","script", "css")
) )
); );

13984
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
Unescape Escape View File

@ -1,9 +1,10 @@
{ {
"name": "gulp-static-html-scss-demo", "name": "glup-static-html-demo-es6-scss",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "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", "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" "build": "node --max_old_space_size=8096 node_modules/gulp-cli/bin/gulp.js build"
}, },
@ -20,18 +21,23 @@
"author": "ppst", "author": "ppst",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0", "gulp-autoprefixer": "^8.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0", "gulp-clean": "^0.4.0",
"gulp-connect": "^5.7.0", "gulp-connect": "^5.7.0",
"gulp-file-include": "^2.3.0", "gulp-file-include": "^2.3.0",
"gulp-minify-css": "^1.2.4", "gulp-minify-css": "^1.2.4",
"gulp-minify-html": "^1.0.6", "gulp-minify-html": "^1.0.6",
"gulp-rename": "^2.0.0" "gulp-rename": "^2.0.0",
"webpack-stream": "^7.0.0"
}, },
"dependencies": { "dependencies": {
"gulp-cli": "^2.3.0", "gulp-cli": "^2.3.0",
"gulp-sass": "^5.1.0", "gulp-sass": "^5.1.0",
"sass": "^1.50.1" "gulp-sourcemaps": "^3.0.0",
"sass": "^1.51.0"
} }
} }

24
src/index.html
Unescape Escape View File

@ -1,15 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head>
<head>
@@include('./tpl/header.html') @@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> <section>
@@include('./tpl/empty.html') <svg id="markmap" class="markmap-svg"></svg>
</section> </section>
@@include('./tpl/footer.html') @@include('./tpl/footer.html')
</body> </body>
</html>
</html>

82
src/static/css/common.css
Unescape Escape View File

@ -1,4 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
/* 背景颜色 */
/* 字体 */
/*普通字体颜色*/
/* 重置样式 */ /* 重置样式 */
html { html {
font-family: sans-serif; font-family: sans-serif;
@ -12,25 +15,82 @@ body {
a:link, a:visited, a:hover, a:active { a:link, a:visited, a:hover, a:active {
text-decoration: none; text-decoration: none;
color: #171a2e; color: #5bbe8e;
}
.empty-box {
width: 400px;
height: 100vh;
margin: 0 auto;
} }
/* 底部 */ /* 底部 */
.footer-box { .footer-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 60px; align-items: center;
background-color: #171a2e; position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-color: #5bbe8e;
} }
.footer-box .content { .footer-box .content {
margin-top: 20px; font-size: 12px;
font-size: 14px;
color: #fff; 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;
} }

4
src/static/css/variable.css
Unescape Escape View File

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

1
src/static/js/index.js
Unescape Escape View File

@ -0,0 +1 @@

0
src/static/js/main.js
Unescape Escape View File

1
src/static/lib/demo.js
Unescape Escape View File

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

65
src/static/scss/common.scss
Unescape Escape View File

@ -14,25 +14,52 @@ html {
color: $common-font-color; color: $common-font-color;
} }
.empty-box{ /* 底部 */
width: 400px; .footer-box {
height: 100vh; display: flex;
margin: 0 auto; justify-content: center;
} align-items: center;
position: fixed;
/* 底部 */ bottom: 0;
.footer-box { 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; display: flex;
justify-content: center; justify-content: space-around;
height: 60px; align-items: center;
background-color: $footer-bg-color; padding: 0 10%;
.logo {
font-size: 16px;
}
a:link,a:visited,a:hover,a:active {
color: $common-font-color;
}
} }
.opr-box{
.footer-box .content { display: flex;
margin-top: 20px; align-items: center;
font-size: 14px; color: $common-font-color;
color: $footer-color; .item{
font-size: $medium-font-size;
margin-right: 10px;
}
} }
}

5
src/static/scss/variable.scss
Unescape Escape View File

@ -1,6 +1,7 @@
/* 背景颜色 */ /* 背景颜色 */
$body-bg-color: #fff; $body-bg-color: #fff;
$footer-bg-color:#171a2e; $footer-bg-color:#5bbe8e;
/* 字体 */ /* 字体 */
@ -10,5 +11,5 @@ $medium-font-size:16px;
$small-font-size:12px; $small-font-size:12px;
$mini-font-size:8px; $mini-font-size:8px;
$common-font-color:#171a2e;/*普通字体颜色*/ $common-font-color:#5bbe8e;/*普通字体颜色*/
$footer-color:#fff; $footer-color:#fff;

3
src/tpl/empty.html
View File

File diff suppressed because one or more lines are too long

10
src/tpl/nav.html
Unescape Escape View File

@ -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>

11
webpack/webpack.config.js
Unescape Escape View File

@ -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'
},
}
Write Preview
Loading…
Cancel
Save