普通静态页面[scss]

feat: 利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作
11 changed files with 11102 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,90 @@
 var gulp = require("gulp");
 var connect = require("gulp-connect");
 var minifyHtml = require("gulp-minify-html"); //压缩html
 var rename = require("gulp-rename"); //重命名
 var scssToCss  = require("gulp-sass")(require('sass')); //scss to css
 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("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")
    .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/scss/*.scss", gulp.series(
    "scss",
    gulp.parallel("css")
  ));
 });
 gulp.task(
  "default",
  gulp.series(
    "clean",
    "scss",
    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,37 @@
 {
  "name": "gulp-static-html-scss-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",
    "gulp-sass": "^5.1.0",
    "sass": "^1.50.1"
  }
 }
--- 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,36 @@
@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;
 }
 /* 底部 */
 .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/static/scss/common.scss
+++ b/src/static/scss/common.scss
@ -0,0 +1,38 @@
@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;
  }
  .empty-box{
    width: 400px;
    height: 100vh;
    margin: 0 auto;
  }
  /* 底部 */
  .footer-box {
    display: flex;
    justify-content: center;
    height: 60px;
    background-color: $footer-bg-color;
  }
  .footer-box .content {
    margin-top: 20px;
    font-size: 14px;
    color: $footer-color;
  }
--- a/src/static/scss/variable.scss
+++ b/src/static/scss/variable.scss
@ -0,0 +1,14 @@
 /* 背景颜色 */
 $body-bg-color: #fff;
 $footer-bg-color:#171a2e;
 /* 字体 */
 $common-font-size:14px;
 $big-font-size:24px;
 $medium-font-size:16px;
 $small-font-size:12px;
 $mini-font-size:8px;
 $common-font-color:#171a2e;/*普通字体颜色*/
 $footer-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" />
Author	SHA1	Message	Date
ppst	75fa485d91	普通静态页面[scss]	2 years ago
ppst	135f54cf91	feat: 利用gulp，实现静态页面自动启动服务器、实时刷新、es6转义、scss转css，共用公共页面等操作	2 years ago