feat: 利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作

2 years ago · 135f54cf91
parent 52e1ed8a10
commit 135f54cf91
9 changed files with 10597 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist
--- a/gulpfile.js
+++ b/gulpfile.js
@ -0,0 +1,79 @@
+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 clean = require("gulp-clean");
+
+var fileinclude = require("gulp-file-include");
+
+// 创建
+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("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/static/css/*.css", gulp.series("css"));
+});
+
+gulp.task(
+  "default",
+  gulp.series(
+    "clean",
+    gulp.parallel("html", "css"),
+    gulp.parallel("connect", "watchs")
+  )
+);
+
+gulp.task(
+  "build",
+  gulp.series(
+    "clean",
+    gulp.parallel("html", "css")
+  )
+);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,35 @@
+{
+  "name": "gulp-static-html-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "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": {
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^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"
+  },
+  "dependencies": {
+    "gulp-cli": "^2.3.0"
+  }
+}
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    @@include('./tpl/header.html')
+</head>
+
+<body>
+    <section>
+        @@include('./tpl/empty.html')
+    </section>
+    @@include('./tpl/footer.html')
+</body>
+
+</html>
--- a/src/static/css/common.css
+++ b/src/static/css/common.css
@ -0,0 +1,35 @@
+/* 重置样式 */
+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;
+}
+
+/* 底部 */
+.footer-box {
+  display: flex;
+  justify-content: center;
+  height: 60px;
+  background-color: #171a2e;
+}
+
+.footer-box .content {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #fff;
+}
+
+
--- a/src/tpl/empty.html
+++ b/src/tpl/empty.html
--- a/src/tpl/footer.html
+++ b/src/tpl/footer.html
@ -0,0 +1,3 @@
+<footer class="footer-box">
+    <div class="content">ppst Copyright ©</div>
+</footer>
--- a/src/tpl/header.html
+++ b/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" />