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

Compare commits

base: pp:common
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
common ... 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 10250 additions and 4025 deletions
Show Stats

2
README.md
Unescape Escape View File

@ -2,7 +2,6 @@
这个demo，主要是为了快速开发纯静态项目。 这个demo，主要是为了快速开发纯静态项目。
利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作 利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作
## 使用 ## 使用
```shell ```shell
@ -47,4 +46,3 @@ npm run build
4. 压缩html、css 4. 压缩html、css
5. scss转换为css 5. scss转换为css
6. es6转义 6. es6转义

49
gulpfile.js
Unescape Escape View File

@ -6,11 +6,17 @@ var minifyHtml = require("gulp-minify-html"); //压缩html
var rename = require("gulp-rename"); //重命名 var rename = require("gulp-rename"); //重命名
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({
@ -36,11 +42,16 @@ 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 () {
return gulp
.src("src/static/scss/*.scss")
.pipe(scssToCss())//编译scss
.pipe(gulp.dest("src/static/css/"))
});
gulp.task("css", function () { gulp.task("css", function () {
return gulp return gulp
.src("src/static/css/*.css") .src("src/static/css/*.css")
@ -58,14 +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/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( gulp.task(
"default", "default",
gulp.series( gulp.series(
"clean", "clean",
gulp.parallel("html", "css"), "scss",
gulp.parallel("html","lib","script", "css"),
gulp.parallel("connect", "watchs") gulp.parallel("connect", "watchs")
) )
); );
@ -74,6 +112,7 @@ gulp.task(
"build", "build",
gulp.series( gulp.series(
"clean", "clean",
gulp.parallel("html", "css") "scss",
gulp.parallel("html","lib","script", "css")
) )
); );

13817
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
package.json
Unescape Escape View File

@ -1,9 +1,10 @@
{ {
"name": "gulp-static-html-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,16 +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-sourcemaps": "^3.0.0",
"sass": "^1.51.0"
} }
} }

14
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')
<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> </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>

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

@ -1,35 +1,96 @@
@charset "UTF-8";
/* 背景颜色 */
/* 字体 */
/*普通字体颜色*/
/* 重置样式 */ /* 重置样式 */
html { html {
font-family: sans-serif; font-family: sans-serif;
font-size: 14px; font-size: 14px;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
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

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

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

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

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