Skip to content

Commit 3d1b3a7

Browse files
itstriveitstrive
committed
add gulp less pro templte
1 parent 0cfee49 commit 3d1b3a7

File tree

8 files changed

+567
-0
lines changed

8 files changed

+567
-0
lines changed

‎gulp-less-pro-temp/gulpfile.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const gulp = require('gulp');
2+
const less = require('gulp-less');
3+
const px2rem = require('gulp-px3rem');
4+
const rename = require('gulp-rename');
5+
const connect = require('gulp-connect');
6+
const cleanCSS = require('gulp-clean-css');
7+
8+
const postcss = require('gulp-postcss');
9+
const autoprefixer = require('autoprefixer');
10+
11+
gulp.task('less', function () {
12+
gulp.src('public/less/*.less')
13+
.pipe(less())
14+
.pipe(px2rem({
15+
remUnit: 40,
16+
remPrecision: 6
17+
}))
18+
.pipe(rename(function (path) {
19+
var s = path.basename.replace('.debug', '');
20+
21+
path.basename = s;
22+
}))
23+
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
24+
//.pipe(cleanCSS({compatibility: 'ie8'})) //最后压缩，打开重新运行 gulp 即可
25+
.pipe(gulp.dest('public/css'))
26+
.pipe(connect.reload());
27+
});
28+
29+
gulp.task('html',function(){
30+
gulp.src('public/*.html')
31+
.pipe(connect.reload())
32+
});
33+
34+
gulp.task('connect', function () {
35+
connect.server({
36+
root: 'public',
37+
//host:'192.168.2.114',
38+
port: '8000',
39+
livereload: true
40+
})
41+
});
42+
43+
gulp.task('watch', function () {
44+
gulp.watch('public/less/*.less', ['less']);
45+
gulp.watch('public/*.html',['html']);
46+
});
47+
48+
gulp.task('default', ['connect','watch', 'less','html']);

‎gulp-less-pro-temp/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "less-gulp-demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"autoprefixer": "^7.2.2",
14+
"gulp": "^3.9.1",
15+
"gulp-clean-css": "^3.9.0",
16+
"gulp-connect": "^5.0.0",
17+
"gulp-less": "^3.3.2",
18+
"gulp-postcss": "^7.0.0",
19+
"gulp-px3rem": "^0.3.0",
20+
"gulp-rename": "^1.2.2"
21+
}
22+
}

‎gulp-less-pro-temp/public/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>DEMO</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
9+
<meta name="apple-mobile-web-app-capable" content="yes">
10+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
11+
<meta name="format-detection" content="telephone=no">
12+
<link rel="stylesheet" href="css/index.css">
13+
<script src="js/rem.js"></script>
14+
<script src="js/swiper.min.js"></script>
15+
</head>
16+
17+
<body>
18+
DEMO
19+
</body>
20+
21+
</html>

‎gulp-less-pro-temp/public/js/rem.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Author: Strive
3+
* Date: 2017-12-8
4+
*/
5+
(function(global){
6+
function remChange(){
7+
document.documentElement.style.fontSize=20*document.documentElement.clientWidth/375+'px';
8+
}
9+
remChange();
10+
global.addEventListener('resize',remChange,false);
11+
})(window);

‎gulp-less-pro-temp/public/js/zepto.min.js

+214
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulp-less-pro-temp/public/less/index.less

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@import 'reset.less';
2+
@import 'variable.less';
3+
4+
@import 'header.less';
5+
@import 'button.less';
6+
7+
.slider{
8+
width:100%;
9+
10+
img{
11+
width:100%;
12+
display: block;
13+
max-height:400px;
14+
}
15+
}
16+
17+
/* 重构 swiper组件 */
18+
.swiper-pagination{
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
24+
margin-left:20px;
25+
}
26+
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
27+
bottom:20px;
28+
}
29+
.swiper-pagination-bullet{
30+
width:28px;
31+
height:10px;
32+
background:#fff;
33+
opacity:1;
34+
transition: .1s all ease;
35+
}
36+
.swiper-pagination-bullet-active{
37+
background:transparent;
38+
width:15px;
39+
height:15px;
40+
border-radius: 50%;
41+
border: 5px solid #fff;
42+
}
43+
44+
/* 快捷导航 */
45+
.quick-nav{
46+
width:750px;
47+
height:200px;
48+
border-bottom: 2px solid #c8c8c8;
49+
display: flex;
50+
justify-content: space-around;
51+
align-items: center;
52+
53+
li{
54+
width:136px;
55+
height:136px;
56+
border-radius: 8px;
57+
color: #fff;
58+
font-size: 22px;
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: center;
62+
align-items: center;
63+
64+
a{
65+
width:100%;
66+
height:100%;
67+
color: #fff;
68+
text-decoration:none;
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: center;
72+
align-items: center;
73+
}
74+
.text{
75+
margin-top:12px;
76+
}
77+
78+
.icon-floor{
79+
width:54px;
80+
height:56px;
81+
display: block;
82+
background:url(../images/index-icon/floor-icon.png) no-repeat;
83+
background-size: contain;
84+
}
85+
.icon-water{
86+
width:35px;
87+
height:56px;
88+
display: block;
89+
background:url(../images/index-icon/water-icon.png) no-repeat;
90+
background-size: contain;
91+
}
92+
.icon-global{
93+
width:56px;
94+
height:56px;
95+
display: block;
96+
background:url(../images/index-icon/global-icon.png) no-repeat;
97+
background-size: contain;
98+
}
99+
.icon-msg{
100+
width:56px;
101+
height:56px;
102+
display: block;
103+
background:url(../images/index-icon/msg-icon.png) no-repeat;
104+
background-size: contain;
105+
}
106+
}
107+
108+
.bg-pink{
109+
background:#fc4d90;
110+
}
111+
.bg-blue{
112+
background:#4ca4fd;
113+
}
114+
.bg-red{
115+
background:#fc4c4e;
116+
}
117+
.bg-green{
118+
background:#3cddbc;
119+
}
120+
}

‎gulp-less-pro-temp/public/less/reset.less

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
@charset "utf-8";
2+
3+
html {
4+
color: #000;
5+
background: #fff;
6+
overflow-y: scroll;
7+
-webkit-text-size-adjust: 100%;
8+
-ms-text-size-adjust: 100%;
9+
}
10+
11+
html * {
12+
outline:none;
13+
-webkit-text-size-adjust: none;
14+
-webkit-tap-highlight-color:rgba(0,0,0,0);
15+
}
16+
17+
html, body {
18+
font-family: sans-serif;
19+
}
20+
21+
/* 内外边距通常让各个浏览器样式的表现位置不同 */
22+
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
23+
margin: 0;
24+
padding: 0;
25+
}
26+
27+
input, select, textarea {
28+
font-size: 100%;
29+
}
30+
31+
/* 去掉各 Table cell 的边距并让其边重合 */
32+
table {
33+
border-collapse: collapse;
34+
border-spacing: 0;
35+
}
36+
37+
/* 去除默认边框 */
38+
fieldset, img {
39+
border: 0;
40+
}
41+
42+
/* 去掉 firefox 下此元素的边框 */
43+
abbr, acronym {
44+
border: 0;
45+
font-variant: normal;
46+
}
47+
48+
/* 一致的 del 样式 */
49+
del {
50+
text-decoration: line-through;
51+
}
52+
53+
address, caption, cite, code, dfn, em, th, var {
54+
font-style: normal;
55+
font-weight: 500;
56+
}
57+
58+
/* 去掉列表前的标识, li 会继承 */
59+
ol, ul {
60+
list-style: none;
61+
}
62+
63+
/* 对齐是排版最重要的因素, 别让什么都居中 */
64+
caption, th {
65+
text-align: left;
66+
}
67+
68+
/* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */
69+
h1, h2, h3, h4, h5, h6 {
70+
font-size: 100%;
71+
font-weight: 500;
72+
}
73+
74+
q:before, q:after {
75+
content: '';
76+
}
77+
78+
/* 统一上标和下标 */
79+
sub, sup {
80+
font-size: 75%;
81+
line-height: 0;
82+
position: relative;
83+
vertical-align: baseline;
84+
}
85+
86+
sup {
87+
top: -0.5em;
88+
}
89+
90+
sub {
91+
bottom: -0.25em;
92+
}
93+
94+
/* 正常链接 未访问 */
95+
a:link {
96+
}
97+
98+
/* 鼠标悬停 */
99+
a:hover {
100+
text-decoration: underline;
101+
}
102+
103+
/* 默认不显示下划线，保持页面简洁 */
104+
ins, a {
105+
text-decoration: none;
106+
}
107+
.clearfix:after { content: ""; display: block; clear: both; }
108+
.clearfix { zoom: 1; }
109+
.fl{float:left;}
110+
.fr{float:right;}
111+

‎gulp-less-pro-temp/public/less/variable.less

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* 颜色 */
2+
@color-title:#32b6a1;
3+
/* 字号 */
4+
@fz-title:36px;
5+
@fz-28:28px;
6+
7+
.more-btn{
8+
height:82px;
9+
text-align: center;
10+
line-height: 82px;
11+
box-sizing: border-box;
12+
border-bottom: 2px solid #e6e6e6;
13+
14+
a{
15+
color: #777777;
16+
font-size: 28px;
17+
font-family: 微软雅黑;
18+
}
19+
}
20+

0 commit comments

Comments
 (0)