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" />