├── js └── .gitignore ├── view └── .gitignore ├── img └── .gitignore ├── style ├── .gitignore └── base.css ├── CHANGELOG.md ├── config ├── length.less ├── index.less ├── color.less ├── font.less └── func.less ├── .gitignore ├── less └── base.less ├── LICENSE ├── README.md ├── package.json ├── component ├── reset.less └── icon.less └── gulpfile.js /js/.gitignore: -------------------------------------------------------------------------------- 1 | # 这个目录存放js -------------------------------------------------------------------------------- /view/.gitignore: -------------------------------------------------------------------------------- 1 | # 这个目录存放页面 -------------------------------------------------------------------------------- /img/.gitignore: -------------------------------------------------------------------------------- 1 | # 这个目录存放资源中的图片资源 -------------------------------------------------------------------------------- /style/.gitignore: -------------------------------------------------------------------------------- 1 | # 这个目录存放资源中的图片资源 -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 更新日志 2 | 3 | ## 2019-09-06 4 | 5 | - 优化项目结构 6 | - 增加新的颜色、方法等变量 7 | 8 | ## 2018-06-25 9 | 10 | - 完成初步版本，支持自动刷新页面，监听文件改变等功能 11 | -------------------------------------------------------------------------------- /config/length.less: -------------------------------------------------------------------------------- 1 | // 长度、尺寸定义文件 2 | // 基数 3 | @base_len: 5px; 4 | 5 | @gap-sm: @base_len; 6 | @gap: @base_len * 2; 7 | @gap-md: @base_len * 3; 8 | @gap-lg: @base_len * 4; -------------------------------------------------------------------------------- /config/index.less: -------------------------------------------------------------------------------- 1 | // 综合所有的配置文件，方便导入 2 | // 颜色 3 | @import "./color.less"; 4 | 5 | // 字体 6 | @import "./font.less"; 7 | 8 | // 长度 9 | @import "./length.less"; 10 | 11 | // 方法 12 | @import "./func.less"; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## 剔除 node 模块安装目录 2 | **/node_modules 3 | 4 | ## 剔除 vscode 目录 5 | **/.vscode 6 | 7 | ## 剔除 打包后的目录 8 | **/build 9 | 10 | # 剔除 Logs 11 | logs 12 | *.log 13 | npm-debug.log* 14 | 15 | # Optional npm cache directory 16 | .npm 17 | 18 | # Optional REPL history 19 | .node_repl_history -------------------------------------------------------------------------------- /style/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; 3 | font-size: 14px; 4 | line-height: 22px; 5 | color: #000000; 6 | background-color: #ffffff; 7 | } 8 | -------------------------------------------------------------------------------- /less/base.less: -------------------------------------------------------------------------------- 1 | // 主要定义一些基础、公共的样式 2 | 3 | // 引入配置文件 4 | @import "../config/index.less"; 5 | // 引入样式重置文件 6 | @import "../component/reset.less"; 7 | 8 | // 引入组件 9 | @import "../component/icon.less"; 10 | // 公共样式定义 11 | 12 | body { 13 | font-family: @font-family; 14 | .font-size(); 15 | color: @black; 16 | background-color: @white; 17 | } 18 | -------------------------------------------------------------------------------- /config/color.less: -------------------------------------------------------------------------------- 1 | // 颜色定义文件 2 | @default: #bfbfbf; 3 | @primary: #1890ff; 4 | @info: #13c2c2; 5 | @success: #52c41a; 6 | @warn: #fadb14; 7 | @danger: #f5222d; 8 | 9 | // 灰度定义 10 | @white: #ffffff; 11 | @gray-light: #e5e5e5; 12 | @gray: #c8c9cc; 13 | @gray-dark: #969799; 14 | @gray-darker: #7d7e80; 15 | @black: #000000; 16 | 17 | // 其他颜色定义 18 | @text-color: #323233; 19 | @border-color: #ebedf0; 20 | @active-color: #f2f3f5; 21 | @background-color: #f8f8f8; 22 | @background-color-light: #fafafa; -------------------------------------------------------------------------------- /config/font.less: -------------------------------------------------------------------------------- 1 | // 字体定义 2 | @font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; 3 | 4 | // 字号 5 | @font-size-mini: 10px; 6 | @font-size-sm: 12px; 7 | @font-size: 14px; 8 | @font-size-md: 16px; 9 | @font-size-lg: 18px; 10 | 11 | // 字体粗细 12 | @font-weight: 400; 13 | @font-weight-bold: "bold"; 14 | 15 | // 字体相应的方法 16 | .font-size(@size) { 17 | font-size: @size; 18 | line-height: @size + 8px; 19 | } 20 | .font-size-sm() { 21 | font-size: @font-size-sm; 22 | line-height: @font-size-sm + 8px; 23 | } 24 | .font-size() { 25 | font-size: @font-size; 26 | line-height: @font-size + 8px; 27 | } 28 | .font-size-md() { 29 | font-size: @font-size-md; 30 | line-height: @font-size-md + 8px; 31 | } 32 | .font-size-lg() { 33 | font-size: @font-size-lg; 34 | line-height: @font-size-lg + 8px; 35 | } 36 | .font-weight(@weight) { 37 | font-weight: @weight; 38 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 康兵奎 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # static-html-template 2 | 3 | 静态页面网站快速开发环境，支持自动刷新页面，less样式预处理。 4 | 5 | 本项目主要为了快速创建一个官网类的全静态页面做技术支持，做到快速创建、快速开发、快速发布。 6 | 7 | ## 项目创建 8 | 9 | 使用 cli 工具进行项目创建，快速创建一个能够进行开发的项目。 10 | 11 | 全局安装： 12 | 13 | ```shell 14 | > npm i -g sht-cli 15 | ``` 16 | 17 | 创建项目： 18 | 19 | ```shell 20 | > sht new 21 | ``` 22 | 23 | 根据提示输入，就可以创建一个项目了。 24 | 25 | ## 开发环境准备 26 | 27 | **安装依赖** 28 | 29 | 项目依赖node版本：v10.10.0 30 | 31 | 项目使用到了 `gulp` 需要全局安装。 32 | 33 | ```shell 34 | > npm i -g gulp 35 | ``` 36 | 37 | 项目根目录下，执行安装命令。 38 | 39 | ```shell 40 | > npm i 41 | ``` 42 | 43 | 项目使用到一个 Chrome 插件： LiveReload。 44 | 45 | ## 开发 46 | 47 | 运行项目 48 | 49 | ```shell 50 | > npm start 51 | ``` 52 | 53 | ## 打包发布 54 | 55 | ```shell 56 | > npm run build 57 | ``` 58 | 59 | 项目资源会全部打包到 build 目录下。 60 | 61 | ## 目录说明： 62 | 63 | config: 配置存放目录， 存放相应的配置文件 64 | 65 | img: 图片资源存放文件夹 66 | 67 | js: js 资源存放文件夹 68 | 69 | less: less 样式文件存放目录，会生成相应的 css 文件，存放在 style 文件夹 70 | 71 | style: 样式文件存放目录 72 | 73 | view: html 页面存放目录 74 | 75 | build: 打包发布生成的目录，资源会全部放在这个文件夹，并进行压缩 76 | 77 | ## 可自己改造的地方 78 | 79 | - 合并所有 css 文件为一个文件，并对相应页面引用做修改 80 | - 合并所有的 js 文件为一个文件，并对相应页面引用做修改 81 | - 修改 less 预处理器为 sass 82 | 83 | ## 新支持功能 84 | 85 | - 命令行创建页面，包括完成 html 、 less 文件，并完成相应的引用配置 86 | - cli 操作方式，创建项目（完成） 87 | - GUI 操作界面，新建项目，管理项目，新增页面等功能 88 | 89 | [更新日志](./CHANGELOG.md) 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static-html-template", 3 | "version": "1.0.0", 4 | "description": "静态页面网站快速开发模板，支持自动刷新页面，less样式预处理。", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp webserver", 8 | "watch": "gulp watch", 9 | "build": "gulp" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/BingKui/static-html-template.git" 14 | }, 15 | "keywords": [ 16 | "less", 17 | "sass", 18 | "html-template" 19 | ], 20 | "author": "康兵奎", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/BingKui/static-html-template/issues" 24 | }, 25 | "homepage": "https://github.com/BingKui/static-html-template#readme", 26 | "devDependencies": { 27 | "del": "^3.0.0", 28 | "gulp": "^3.9.1", 29 | "gulp-autoprefixer": "^5.0.0", 30 | "gulp-bom": "^2.0.0", 31 | "gulp-clean-css": "^3.9.4", 32 | "gulp-cssmin": "^0.2.0", 33 | "gulp-gzip": "^1.4.2", 34 | "gulp-htmlmin": "^4.0.0", 35 | "gulp-imagemin": "^4.1.0", 36 | "gulp-less": "^3.5.0", 37 | "gulp-livereload": "^3.8.1", 38 | "gulp-rename": "^1.2.3", 39 | "gulp-replace": "^1.0.0", 40 | "gulp-rev": "^8.1.1", 41 | "gulp-rev-collector": "^1.3.1", 42 | "gulp-server-livereload": "^1.9.2", 43 | "gulp-static-hash": "^0.1.4", 44 | "gulp-tar": "^2.1.0", 45 | "gulp-uglify": "^3.0.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /component/reset.less: -------------------------------------------------------------------------------- 1 | // 引入配置文件 2 | @import "../config/index.less"; 3 | 4 | html, 5 | body, 6 | div, 7 | span, 8 | applet, 9 | object, 10 | iframe, 11 | h1, 12 | h2, 13 | h3, 14 | h4, 15 | h5, 16 | h6, 17 | p, 18 | blockquote, 19 | pre, 20 | a, 21 | abbr, 22 | acronym, 23 | address, 24 | big, 25 | cite, 26 | code, 27 | del, 28 | dfn, 29 | em, 30 | img, 31 | ins, 32 | kbd, 33 | q, 34 | s, 35 | samp, 36 | small, 37 | strike, 38 | strong, 39 | sub, 40 | sup, 41 | tt, 42 | var, 43 | b, 44 | u, 45 | i, 46 | center, 47 | dl, 48 | dt, 49 | dd, 50 | ol, 51 | ul, 52 | li, 53 | fieldset, 54 | form, 55 | label, 56 | legend, 57 | table, 58 | caption, 59 | tbody, 60 | tfoot, 61 | thead, 62 | tr, 63 | th, 64 | td, 65 | article, 66 | aside, 67 | canvas, 68 | details, 69 | embed, 70 | figure, 71 | figcaption, 72 | footer, 73 | header, 74 | hgroup, 75 | menu, 76 | nav, 77 | output, 78 | ruby, 79 | section, 80 | summary, 81 | time, 82 | mark, 83 | audio, 84 | video { 85 | margin: 0; 86 | padding: 0; 87 | font: inherit; 88 | font-size: 100%; 89 | vertical-align: baseline; 90 | border: 0; 91 | } 92 | 93 | html { 94 | line-height: 1; 95 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 96 | } 97 | 98 | ol, 99 | ul { 100 | list-style: none; 101 | } 102 | 103 | table { 104 | border-collapse: collapse; 105 | border-spacing: 0; 106 | } 107 | 108 | caption, 109 | th, 110 | td { 111 | font-weight: normal; 112 | vertical-align: middle; 113 | } 114 | 115 | q, 116 | blockquote { 117 | quotes: none; 118 | } 119 | 120 | q::before, 121 | q::after, 122 | blockquote::before, 123 | blockquote::after { 124 | content: ''; 125 | content: none; 126 | } 127 | 128 | a img { 129 | border: none; 130 | } 131 | 132 | article, 133 | aside, 134 | details, 135 | figcaption, 136 | figure, 137 | footer, 138 | header, 139 | hgroup, 140 | menu, 141 | nav, 142 | section, 143 | summary { 144 | display: block; 145 | } 146 | 147 | * { 148 | box-sizing: content-box; 149 | } 150 | 151 | body { 152 | color: @text-color; 153 | font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif; 154 | background-color: @background-color; 155 | } 156 | 157 | a { 158 | text-decoration: none; 159 | background: transparent; 160 | } 161 | 162 | button, 163 | input[type='number'], 164 | input[type='text'], 165 | input[type='password'], 166 | input[type='email'], 167 | input[type='search'], 168 | select, 169 | textarea { 170 | margin: 0; 171 | font-family: inherit; 172 | -webkit-appearance: none; 173 | } -------------------------------------------------------------------------------- /config/func.less: -------------------------------------------------------------------------------- 1 | // 样式方法定义文件 2 | //方法 3 | .t-l() { 4 | text-align: left; 5 | } 6 | .t-r() { 7 | text-align: right; 8 | } 9 | .t-c() { 10 | text-align: center; 11 | } 12 | .text-overflow () { 13 | overflow: hidden; 14 | text-overflow: ellipsis; 15 | white-space: nowrap; 16 | } 17 | 18 | .text-overflow-line (@num) { 19 | word-break: break-all; 20 | text-overflow: ellipsis; 21 | display: -webkit-box; 22 | -webkit-box-orient: vertical; 23 | -webkit-line-clamp: @num; 24 | overflow: hidden; 25 | } 26 | 27 | .clearfix () { 28 | &:after { 29 | visibility: hidden; 30 | display: block; 31 | font-size: 0; 32 | content: " "; 33 | clear: both; 34 | height: 0; 35 | } 36 | } 37 | 38 | .m(@num) { 39 | margin: @num * 1px; 40 | } 41 | .m-t(@num) { 42 | margin-top: @num * 1px; 43 | } 44 | .m-b(@num) { 45 | margin-bottom: @num * 1px; 46 | } 47 | .m-r(@num) { 48 | margin-right: @num * 1px; 49 | } 50 | .m-l(@num) { 51 | margin-left: @num * 1px; 52 | } 53 | .m-v(@num) { 54 | margin: @num * 1px 0; 55 | } 56 | .m-h(@num) { 57 | margin: 0 @num * 1px; 58 | } 59 | .p(@num) { 60 | padding: @num * 1px; 61 | } 62 | .p-t(@num) { 63 | padding-top: @num * 1px; 64 | } 65 | .p-b(@num) { 66 | padding-bottom: @num * 1px; 67 | } 68 | .p-r(@num) { 69 | padding-right: @num * 1px; 70 | } 71 | .p-l(@num) { 72 | padding-left: @num * 1px; 73 | } 74 | .p-v(@num) { 75 | padding: @num * 1px 0; 76 | } 77 | .p-h(@num) { 78 | padding: 0 @num * 1px; 79 | } 80 | .flex() { 81 | display: flex; 82 | } 83 | .flex-column() { 84 | .flex(); 85 | flex-direction: column; 86 | } 87 | .flex-row() { 88 | .flex(); 89 | flex-direction: row; 90 | } 91 | .flex-center() { 92 | justify-content: center; 93 | align-items: center; 94 | } 95 | .flex-column-center() { 96 | .flex-column(); 97 | .flex-center(); 98 | } 99 | .flex-row-center() { 100 | .flex-row(); 101 | .flex-center(); 102 | } 103 | .flex-end-center() { 104 | justify-content: flex-end; 105 | align-content: center; 106 | } 107 | .flex-start-center() { 108 | justify-content: flex-start; 109 | align-content: center; 110 | } 111 | 112 | // 修改滚动条 113 | .change-scroll-bar() { 114 | &::-webkit-input-placeholder { 115 | color: #000; 116 | opacity: 0.25; 117 | font-size: 14px; 118 | } 119 | 120 | &::-moz-placeholder { 121 | color: #000; 122 | opacity: 0.25; 123 | font-size: 14px; 124 | } 125 | 126 | &:-moz-placeholder { 127 | color: #000; 128 | opacity: 0.25; 129 | font-size: 14px; 130 | } 131 | 132 | &:-ms-input-placeholder { 133 | color: #000; 134 | opacity: 0.25; 135 | font-size: 14px; 136 | } 137 | } 138 | // 滚动相关 139 | .scroll-x() { 140 | overflow-x: scroll; 141 | overflow-y: hidden; 142 | display: block; 143 | white-space: nowrap; 144 | -webkit-overflow-scrolling: touch; 145 | } 146 | .scroll-y() { 147 | overflow-x: hidden; 148 | overflow-y: scroll; 149 | display: block; 150 | -webkit-overflow-scrolling: touch; 151 | } 152 | 153 | // border 相关 154 | .border-line() { 155 | position: relative; 156 | &::after { 157 | height: 1px; 158 | background-color: @border-color; 159 | position: absolute; 160 | bottom: 0; 161 | left: @gap-md; 162 | right: @gap-md; 163 | transform: scaleY(.5); 164 | content: ''; 165 | } 166 | } 167 | 168 | .border-line(@color, @left, @right) { 169 | position: relative; 170 | &::after { 171 | height: 1px; 172 | background-color: @color; 173 | position: absolute; 174 | bottom: 0; 175 | left: @left; 176 | right: @right; 177 | transform: scaleY(.5); 178 | content: ''; 179 | } 180 | } 181 | 182 | .border-line-top() { 183 | position: relative; 184 | &::after { 185 | height: 1px; 186 | background-color: @border-color; 187 | position: absolute; 188 | top: 0; 189 | left: @gap-md; 190 | right: @gap-md; 191 | transform: scaleY(.5); 192 | content: ''; 193 | } 194 | } 195 | 196 | .border-line-top(@color, @left, @right) { 197 | position: relative; 198 | &::after { 199 | height: 1px; 200 | background-color: @color; 201 | position: absolute; 202 | top: 0; 203 | left: @left; 204 | right: @right; 205 | transform: scaleY(.5); 206 | content: ''; 207 | } 208 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * gulpfile.js 3 | */ 4 | 5 | "use strict"; 6 | 7 | const gulp = require("gulp"); 8 | const bom = require("gulp-bom"); 9 | const less = require('gulp-less'); 10 | const hash = require("gulp-static-hash"); 11 | const cssmin = require("gulp-clean-css"); 12 | const uglify = require("gulp-uglify"); 13 | const htmlmin = require("gulp-htmlmin"); 14 | const imagemin = require('gulp-imagemin'); 15 | const livereload = require('gulp-livereload'); 16 | const autoprefixer = require('gulp-autoprefixer'); 17 | const server = require('gulp-server-livereload'); 18 | 19 | const fs = require("fs"); 20 | const replace = require("gulp-replace"); 21 | 22 | // 静态文件打包合并 23 | const del = require("del"); 24 | 25 | // 线上打包 26 | const tar = require("gulp-tar"); 27 | const gzip = require("gulp-gzip"); 28 | 29 | // 生产环境先拷贝目录 30 | gulp.task("copy", function(cb) { 31 | del(["./build"]).then(function() { 32 | gulp.src(["./view/*", "./img/**", "./js/*", "./style/*"], { 33 | base: './' 34 | }) 35 | .pipe(gulp.dest("./build")) 36 | .on("end", cb); 37 | }); 38 | }); 39 | 40 | // js合并与压缩 41 | gulp.task("js", ["copy"], function(cb) { 42 | gulp.src("./build/js/*") 43 | .pipe(uglify()) 44 | .pipe(bom()) 45 | .pipe(gulp.dest("./build/js/")) 46 | .on("end", cb); 47 | }); 48 | // js合并与压缩 49 | gulp.task("minjs", function(cb) { 50 | gulp.src("./build/js/*") 51 | .pipe(uglify()) 52 | .pipe(bom()) 53 | .pipe(gulp.dest("./build/js/")) 54 | .on("end", cb); 55 | }); 56 | 57 | // less编译 58 | gulp.task("less", ["js"], function(cb) { 59 | gulp.src('./less/**.less') 60 | .pipe(less()) 61 | .pipe(gulp.dest('style/')) 62 | .on("end", cb); 63 | }); 64 | 65 | // css合并与压缩 66 | gulp.task("style", ["less"], function(cb) { 67 | gulp.src("./build/style/*") 68 | .pipe(autoprefixer({ 69 | browsers: ['last 2 versions'], 70 | cascade: false 71 | })) 72 | .pipe(cssmin({compatibility: 'ie8'})) 73 | .pipe(bom()) 74 | .pipe(gulp.dest("./build/style/")) 75 | .on("end", cb); 76 | }); 77 | 78 | // html添加hash后缀 79 | gulp.task("hash", ["style"], function(cb) { 80 | gulp.src("./build/view/*.html") 81 | .pipe( 82 | replace("../", `./`) 83 | ) 84 | .pipe(hash({ 85 | asset: "./" 86 | })) 87 | .pipe(bom()) 88 | .pipe(gulp.dest("./build/view")) 89 | .on("end", cb); 90 | }); 91 | 92 | // 压缩图片 93 | gulp.task('img', ['hash'], function(cb) { 94 | gulp.src('img/**/*.{png,jpg,gif,ico}') 95 | .pipe(imagemin({ 96 | optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） 97 | progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 98 | interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 99 | multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 100 | })) 101 | .pipe(gulp.dest('build/img')) 102 | .on("end", cb);; 103 | }); 104 | 105 | // 压缩html页面 106 | gulp.task("minify", ["img"], function(cb) { 107 | gulp.src("./build/view/*.html") 108 | .pipe(htmlmin({ 109 | collapseWhitespace: true 110 | })) 111 | .pipe(gulp.dest('./build')) 112 | .on("end", cb); 113 | }); 114 | 115 | // 删除没有压缩的 html 文件 116 | gulp.task("del-html", ["minify"], function(cb) { 117 | // 删除没有压缩的 html 文件 118 | del(["./build/view"]); 119 | }); 120 | 121 | //编译less 122 | gulp.task('less_dev', function() { 123 | gulp.src('./less/**.less') 124 | .pipe(less()) 125 | .pipe(gulp.dest('style/')); 126 | }); 127 | 128 | //监听所有打包之后的文件变动，自动刷新页面 129 | gulp.task('watch', function() { 130 | // Create LiveReload server 131 | livereload.listen({ 132 | port: 9000 133 | }); 134 | // Watch any files in dist/, reload on change 135 | //监听less文件 136 | try { 137 | gulp.watch('./less/**', ['less_dev']) 138 | gulp.watch(['style/**']).on('change', livereload.changed); 139 | gulp.watch(['views/**']).on('change', livereload.changed); 140 | gulp.watch(['js/**']).on('change', livereload.changed); 141 | } catch (e) { 142 | console.log(e); 143 | gulp.task('watch'); 144 | } 145 | }); 146 | 147 | gulp.task('watch', function() { 148 | //监听less文件 149 | gulp.watch('./less/**.less', ['less_dev']) 150 | }); 151 | 152 | gulp.task('webserver', ['watch'], function() { 153 | gulp.src('./') 154 | .pipe(server({ 155 | host: '0.0.0.0', 156 | livereload: { 157 | enable: true, 158 | filter: function(filename, cb) { 159 | cb(!/\.(sa|le)ss$|node_modules/.test(filename)); 160 | } 161 | }, 162 | directoryListing: true, 163 | open: true, 164 | defaultFile: 'index.html' 165 | })); 166 | }); 167 | 168 | gulp.task('copy-package.json', function() { 169 | gulp.src('./package.json') 170 | .pipe(gulp.dest('build/')); 171 | }); 172 | 173 | // 生产 174 | gulp.task("default", ["del-html"]); 175 | 176 | module.exports = gulp; -------------------------------------------------------------------------------- /component/icon.less: -------------------------------------------------------------------------------- 1 | // 字体图标组件 2 | // 定义字体 3 | @font-face { 4 | font-family: "vfont"; 5 | src: url('//at.alicdn.com/t/font_494210_zevxcp6rxkj.eot'); 6 | src: url('//at.alicdn.com/t/font_494210_zevxcp6rxkj.eot?#iefix') format('embedded-opentype'), 7 | url('//at.alicdn.com/t/font_494210_zevxcp6rxkj.woff2') format('woff2'), 8 | url('//at.alicdn.com/t/font_494210_zevxcp6rxkj.woff') format('woff'), 9 | url('//at.alicdn.com/t/font_494210_zevxcp6rxkj.ttf') format('truetype'), 10 | url('//at.alicdn.com/t/font_494210_zevxcp6rxkj.svg#iconfont') format('svg'); 11 | } 12 | 13 | .v-icon { 14 | font-family: "vfont" !important; 15 | font-size: 16px; 16 | font-style: normal; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | 20 | &-edit:before { 21 | content: "\e70a"; 22 | } 23 | 24 | &-icon--1:before { 25 | content: "\e70b"; 26 | } 27 | 28 | &-icon--2:before { 29 | content: "\e70c"; 30 | } 31 | 32 | &-icon--3:before { 33 | content: "\e70d"; 34 | } 35 | 36 | &-icon--4:before { 37 | content: "\e70e"; 38 | } 39 | 40 | &-icon--5:before { 41 | content: "\e70f"; 42 | } 43 | 44 | &-icon--6:before { 45 | content: "\e710"; 46 | } 47 | 48 | &-icon--7:before { 49 | content: "\e711"; 50 | } 51 | 52 | &-icon--8:before { 53 | content: "\e712"; 54 | } 55 | 56 | &-icon--9:before { 57 | content: "\e713"; 58 | } 59 | 60 | &-icon--10:before { 61 | content: "\e714"; 62 | } 63 | 64 | &-icon--11:before { 65 | content: "\e715"; 66 | } 67 | 68 | &-icon--12:before { 69 | content: "\e716"; 70 | } 71 | 72 | &-icon--13:before { 73 | content: "\e717"; 74 | } 75 | 76 | &-icon--14:before { 77 | content: "\e718"; 78 | } 79 | 80 | &-icon--15:before { 81 | content: "\e719"; 82 | } 83 | 84 | &-icon--16:before { 85 | content: "\e71a"; 86 | } 87 | 88 | &-icon--17:before { 89 | content: "\e71b"; 90 | } 91 | 92 | &-icon--18:before { 93 | content: "\e71c"; 94 | } 95 | 96 | &-icon--19:before { 97 | content: "\e71d"; 98 | } 99 | 100 | &-icon--20:before { 101 | content: "\e71e"; 102 | } 103 | 104 | &-icon--21:before { 105 | content: "\e71f"; 106 | } 107 | 108 | &-icon--22:before { 109 | content: "\e720"; 110 | } 111 | 112 | &-icon--23:before { 113 | content: "\e721"; 114 | } 115 | 116 | &-icon--24:before { 117 | content: "\e722"; 118 | } 119 | 120 | &-icon--25:before { 121 | content: "\e723"; 122 | } 123 | 124 | &-icon--26:before { 125 | content: "\e724"; 126 | } 127 | 128 | &-icon--27:before { 129 | content: "\e725"; 130 | } 131 | 132 | &-icon--28:before { 133 | content: "\e726"; 134 | } 135 | 136 | &-icon--29:before { 137 | content: "\e727"; 138 | } 139 | 140 | &-icon--30:before { 141 | content: "\e728"; 142 | } 143 | 144 | &-icon--31:before { 145 | content: "\e729"; 146 | } 147 | 148 | &-icon--32:before { 149 | content: "\e72a"; 150 | } 151 | 152 | &-icon--33:before { 153 | content: "\e72b"; 154 | } 155 | 156 | &-icon--34:before { 157 | content: "\e72c"; 158 | } 159 | 160 | &-icon--35:before { 161 | content: "\e72d"; 162 | } 163 | 164 | &-icon--36:before { 165 | content: "\e72e"; 166 | } 167 | 168 | &-icon--37:before { 169 | content: "\e72f"; 170 | } 171 | 172 | &-icon--38:before { 173 | content: "\e730"; 174 | } 175 | 176 | &-icon--39:before { 177 | content: "\e731"; 178 | } 179 | 180 | &-icon--40:before { 181 | content: "\e732"; 182 | } 183 | 184 | &-icon--41:before { 185 | content: "\e733"; 186 | } 187 | 188 | &-icon--42:before { 189 | content: "\e734"; 190 | } 191 | 192 | &-icon--43:before { 193 | content: "\e735"; 194 | } 195 | 196 | &-icon--44:before { 197 | content: "\e736"; 198 | } 199 | 200 | &-icon--45:before { 201 | content: "\e737"; 202 | } 203 | 204 | &-icon--46:before { 205 | content: "\e738"; 206 | } 207 | 208 | &-icon--47:before { 209 | content: "\e739"; 210 | } 211 | 212 | &-icon--48:before { 213 | content: "\e73a"; 214 | } 215 | 216 | &-icon--49:before { 217 | content: "\e73b"; 218 | } 219 | 220 | &-icon--50:before { 221 | content: "\e73c"; 222 | } 223 | 224 | &-icon--51:before { 225 | content: "\e73d"; 226 | } 227 | 228 | &-icon--52:before { 229 | content: "\e73e"; 230 | } 231 | 232 | &-icon--53:before { 233 | content: "\e73f"; 234 | } 235 | 236 | &-icon--54:before { 237 | content: "\e740"; 238 | } 239 | 240 | &-icon--55:before { 241 | content: "\e741"; 242 | } 243 | 244 | &-icon--56:before { 245 | content: "\e742"; 246 | } 247 | 248 | &-icon--57:before { 249 | content: "\e743"; 250 | } 251 | 252 | &-icon--58:before { 253 | content: "\e744"; 254 | } 255 | 256 | &-icon--59:before { 257 | content: "\e745"; 258 | } 259 | 260 | &-icon--60:before { 261 | content: "\e746"; 262 | } 263 | 264 | &-icon--61:before { 265 | content: "\e747"; 266 | } 267 | 268 | &-icon--62:before { 269 | content: "\e748"; 270 | } 271 | 272 | &-icon--63:before { 273 | content: "\e749"; 274 | } 275 | 276 | &-icon--64:before { 277 | content: "\e74a"; 278 | } 279 | 280 | &-icon--65:before { 281 | content: "\e74b"; 282 | } 283 | 284 | &-icon--66:before { 285 | content: "\e74c"; 286 | } 287 | 288 | &-icon--67:before { 289 | content: "\e74d"; 290 | } 291 | 292 | &-icon--68:before { 293 | content: "\e74e"; 294 | } 295 | 296 | &-icon--69:before { 297 | content: "\e74f"; 298 | } 299 | 300 | &-icon--70:before { 301 | content: "\e750"; 302 | } 303 | 304 | &-icon--71:before { 305 | content: "\e751"; 306 | } 307 | 308 | &-icon--72:before { 309 | content: "\e752"; 310 | } 311 | 312 | &-icon--73:before { 313 | content: "\e753"; 314 | } 315 | 316 | &-icon--74:before { 317 | content: "\e754"; 318 | } 319 | 320 | &-icon--75:before { 321 | content: "\e755"; 322 | } 323 | 324 | &-icon--76:before { 325 | content: "\e756"; 326 | } 327 | 328 | &-icon--77:before { 329 | content: "\e757"; 330 | } 331 | 332 | &-icon--78:before { 333 | content: "\e758"; 334 | } 335 | 336 | &-icon--79:before { 337 | content: "\e759"; 338 | } 339 | 340 | &-icon--80:before { 341 | content: "\e75a"; 342 | } 343 | 344 | &-icon--81:before { 345 | content: "\e75b"; 346 | } 347 | 348 | &-icon--82:before { 349 | content: "\e75c"; 350 | } 351 | 352 | &-icon--83:before { 353 | content: "\e75d"; 354 | } 355 | 356 | &-icon--84:before { 357 | content: "\e75e"; 358 | } 359 | 360 | &-icon--85:before { 361 | content: "\e75f"; 362 | } 363 | 364 | &-icon--86:before { 365 | content: "\e760"; 366 | } 367 | 368 | &-icon--87:before { 369 | content: "\e761"; 370 | } 371 | 372 | &-icon--88:before { 373 | content: "\e762"; 374 | } 375 | 376 | &-icon--89:before { 377 | content: "\e763"; 378 | } 379 | 380 | &-icon--90:before { 381 | content: "\e764"; 382 | } 383 | 384 | &-icon--91:before { 385 | content: "\e765"; 386 | } 387 | 388 | &-icon--92:before { 389 | content: "\e766"; 390 | } 391 | 392 | &-icon--93:before { 393 | content: "\e767"; 394 | } 395 | 396 | &-icon--94:before { 397 | content: "\e768"; 398 | } 399 | 400 | &-icon--95:before { 401 | content: "\e769"; 402 | } 403 | 404 | &-icon--96:before { 405 | content: "\e76a"; 406 | } 407 | 408 | &-icon--97:before { 409 | content: "\e76b"; 410 | } 411 | 412 | &-icon--98:before { 413 | content: "\e76c"; 414 | } 415 | 416 | &-icon--99:before { 417 | content: "\e76d"; 418 | } 419 | 420 | &-icon--100:before { 421 | content: "\e76e"; 422 | } 423 | 424 | &-icon--101:before { 425 | content: "\e76f"; 426 | } 427 | 428 | &-icon--102:before { 429 | content: "\e770"; 430 | } 431 | 432 | &-icon--103:before { 433 | content: "\e771"; 434 | } 435 | 436 | &-icon--104:before { 437 | content: "\e772"; 438 | } 439 | 440 | &-icon--105:before { 441 | content: "\e773"; 442 | } 443 | 444 | &-icon--106:before { 445 | content: "\e774"; 446 | } 447 | 448 | &-icon--107:before { 449 | content: "\e775"; 450 | } 451 | 452 | &-icon--108:before { 453 | content: "\e776"; 454 | } 455 | 456 | &-icon--109:before { 457 | content: "\e777"; 458 | } 459 | 460 | &-icon--110:before { 461 | content: "\e778"; 462 | } 463 | 464 | &-icon--111:before { 465 | content: "\e779"; 466 | } 467 | 468 | &-icon--112:before { 469 | content: "\e77a"; 470 | } 471 | 472 | &-icon--113:before { 473 | content: "\e77b"; 474 | } 475 | 476 | &-icon--114:before { 477 | content: "\e77c"; 478 | } 479 | 480 | &-icon--115:before { 481 | content: "\e77d"; 482 | } 483 | 484 | &-icon--116:before { 485 | content: "\e77e"; 486 | } 487 | 488 | &-icon--117:before { 489 | content: "\e77f"; 490 | } 491 | 492 | &-icon--118:before { 493 | content: "\e780"; 494 | } 495 | 496 | &-icon--119:before { 497 | content: "\e781"; 498 | } 499 | 500 | &-icon--120:before { 501 | content: "\e782"; 502 | } 503 | 504 | &-icon--121:before { 505 | content: "\e783"; 506 | } 507 | 508 | &-icon--122:before { 509 | content: "\e784"; 510 | } 511 | 512 | &-icon--123:before { 513 | content: "\e785"; 514 | } 515 | 516 | &-icon--124:before { 517 | content: "\e786"; 518 | } 519 | 520 | &-icon--125:before { 521 | content: "\e787"; 522 | } 523 | 524 | &-icon--126:before { 525 | content: "\e788"; 526 | } 527 | 528 | &-icon--127:before { 529 | content: "\e789"; 530 | } 531 | 532 | &-icon--128:before { 533 | content: "\e78a"; 534 | } 535 | 536 | &-icon--129:before { 537 | content: "\e78b"; 538 | } 539 | 540 | &-icon--130:before { 541 | content: "\e78c"; 542 | } 543 | 544 | &-icon--131:before { 545 | content: "\e78d"; 546 | } 547 | 548 | &-icon--132:before { 549 | content: "\e78e"; 550 | } 551 | 552 | &-icon--133:before { 553 | content: "\e78f"; 554 | } 555 | 556 | &-icon--134:before { 557 | content: "\e790"; 558 | } 559 | 560 | &-icon--135:before { 561 | content: "\e791"; 562 | } 563 | 564 | &-icon--136:before { 565 | content: "\e792"; 566 | } 567 | 568 | &-icon--137:before { 569 | content: "\e793"; 570 | } 571 | 572 | &-icon--138:before { 573 | content: "\e794"; 574 | } 575 | 576 | &-icon--139:before { 577 | content: "\e795"; 578 | } 579 | 580 | &-icon--140:before { 581 | content: "\e796"; 582 | } 583 | 584 | &-icon--141:before { 585 | content: "\e797"; 586 | } 587 | 588 | &-icon--142:before { 589 | content: "\e798"; 590 | } 591 | 592 | &-icon--143:before { 593 | content: "\e799"; 594 | } 595 | 596 | &-icon--144:before { 597 | content: "\e79a"; 598 | } 599 | 600 | &-icon--145:before { 601 | content: "\e79b"; 602 | } 603 | 604 | &-icon--146:before { 605 | content: "\e79c"; 606 | } 607 | 608 | &-icon--147:before { 609 | content: "\e79d"; 610 | } 611 | 612 | &-icon--148:before { 613 | content: "\e79e"; 614 | } 615 | 616 | &-icon--149:before { 617 | content: "\e79f"; 618 | } 619 | 620 | &-icon--150:before { 621 | content: "\e7a0"; 622 | } 623 | 624 | &-icon--151:before { 625 | content: "\e7a1"; 626 | } 627 | 628 | &-icon--152:before { 629 | content: "\e7a2"; 630 | } 631 | 632 | &-icon--153:before { 633 | content: "\e7a3"; 634 | } 635 | 636 | &-icon--154:before { 637 | content: "\e7a4"; 638 | } 639 | 640 | &-icon--155:before { 641 | content: "\e7a5"; 642 | } 643 | 644 | &-icon--156:before { 645 | content: "\e7a6"; 646 | } 647 | 648 | &-icon--157:before { 649 | content: "\e7a7"; 650 | } 651 | 652 | &-icon--158:before { 653 | content: "\e7a8"; 654 | } 655 | 656 | &-icon--159:before { 657 | content: "\e7a9"; 658 | } 659 | 660 | &-icon--160:before { 661 | content: "\e7aa"; 662 | } 663 | 664 | &-icon--161:before { 665 | content: "\e7ab"; 666 | } 667 | 668 | &-icon--162:before { 669 | content: "\e7ac"; 670 | } 671 | 672 | &-icon--163:before { 673 | content: "\e7ad"; 674 | } 675 | 676 | &-icon--164:before { 677 | content: "\e7ae"; 678 | } 679 | 680 | &-icon--165:before { 681 | content: "\e7af"; 682 | } 683 | 684 | &-icon--166:before { 685 | content: "\e7b0"; 686 | } 687 | 688 | &-icon--167:before { 689 | content: "\e7b1"; 690 | } 691 | 692 | &-icon--168:before { 693 | content: "\e7b2"; 694 | } 695 | 696 | &-icon--169:before { 697 | content: "\e7b3"; 698 | } 699 | 700 | &-icon--170:before { 701 | content: "\e7b4"; 702 | } 703 | 704 | &-icon--171:before { 705 | content: "\e7b5"; 706 | } 707 | 708 | &-icon--172:before { 709 | content: "\e7b6"; 710 | } 711 | 712 | &-icon--173:before { 713 | content: "\e7b7"; 714 | } 715 | 716 | &-icon--174:before { 717 | content: "\e7b8"; 718 | } 719 | 720 | &-icon--175:before { 721 | content: "\e7b9"; 722 | } 723 | 724 | &-icon--176:before { 725 | content: "\e7ba"; 726 | } 727 | 728 | &-icon--177:before { 729 | content: "\e7bb"; 730 | } 731 | 732 | &-icon--178:before { 733 | content: "\e7bc"; 734 | } 735 | 736 | &-icon--179:before { 737 | content: "\e7bd"; 738 | } 739 | 740 | &-icon--180:before { 741 | content: "\e7be"; 742 | } 743 | 744 | &-icon--181:before { 745 | content: "\e7bf"; 746 | } 747 | 748 | &-icon--182:before { 749 | content: "\e7c0"; 750 | } 751 | 752 | &-icon--183:before { 753 | content: "\e7c1"; 754 | } 755 | 756 | &-icon--184:before { 757 | content: "\e7c2"; 758 | } 759 | 760 | &-icon--185:before { 761 | content: "\e7c3"; 762 | } 763 | 764 | &-icon--186:before { 765 | content: "\e7c4"; 766 | } 767 | 768 | &-icon--187:before { 769 | content: "\e7c5"; 770 | } 771 | 772 | &-icon--188:before { 773 | content: "\e7c6"; 774 | } 775 | 776 | &-icon--189:before { 777 | content: "\e7c7"; 778 | } 779 | 780 | &-icon--190:before { 781 | content: "\e7c8"; 782 | } 783 | 784 | &-icon--191:before { 785 | content: "\e7c9"; 786 | } 787 | 788 | &-icon--192:before { 789 | content: "\e7ca"; 790 | } 791 | 792 | &-icon--193:before { 793 | content: "\e7cb"; 794 | } 795 | 796 | &-icon--194:before { 797 | content: "\e7cc"; 798 | } 799 | 800 | &-icon--195:before { 801 | content: "\e7cd"; 802 | } 803 | 804 | &-icon--196:before { 805 | content: "\e7ce"; 806 | } 807 | 808 | &-icon--197:before { 809 | content: "\e7cf"; 810 | } 811 | 812 | &-icon--198:before { 813 | content: "\e7d0"; 814 | } 815 | 816 | &-icon--199:before { 817 | content: "\e7d1"; 818 | } 819 | 820 | &-icon--200:before { 821 | content: "\e7d2"; 822 | } 823 | 824 | &-icon--201:before { 825 | content: "\e7d3"; 826 | } 827 | 828 | &-icon--202:before { 829 | content: "\e7d4"; 830 | } 831 | 832 | &-icon--203:before { 833 | content: "\e7d5"; 834 | } 835 | 836 | &-icon--204:before { 837 | content: "\e7d6"; 838 | } 839 | 840 | &-icon--205:before { 841 | content: "\e7d7"; 842 | } 843 | 844 | &-icon--206:before { 845 | content: "\e7d8"; 846 | } 847 | 848 | &-icon--207:before { 849 | content: "\e7d9"; 850 | } 851 | 852 | &-icon--208:before { 853 | content: "\e7da"; 854 | } 855 | 856 | &-icon--209:before { 857 | content: "\e7db"; 858 | } 859 | 860 | &-icon--210:before { 861 | content: "\e7dc"; 862 | } 863 | 864 | &-icon--211:before { 865 | content: "\e7dd"; 866 | } 867 | 868 | &-icon--212:before { 869 | content: "\e7de"; 870 | } 871 | 872 | &-icon--213:before { 873 | content: "\e7df"; 874 | } 875 | 876 | &-icon--214:before { 877 | content: "\e7e0"; 878 | } 879 | 880 | &-heart:before { 881 | content: "\e7e1"; 882 | } 883 | 884 | &-star:before { 885 | content: "\e7e2"; 886 | } 887 | 888 | &-icon--217:before { 889 | content: "\e7e3"; 890 | } 891 | } --------------------------------------------------------------------------------