Skip to content

Commit c0064d8

Browse files
author
iwx
committed
增加less和gulp
1、增加less，降低配置sass环境的复杂过程 2、增加gulp打包方式，打包更容易
1 parent 6c300c5 commit c0064d8

37 files changed

+4742
-3
lines changed

‎.csscomb.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"always-semicolon": false,
3+
"block-indent": 4,
4+
"space-between-declarations": "\n",
5+
"space-after-opening-brace": "\n",
6+
"space-before-closing-brace": "\n",
7+
"leading-zero": true,
8+
"strip-spaces": true,
9+
"vendor-prefix-align": true
10+
}

‎gulpfile.js

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
'use strict';
2+
3+
var path = require('path');
4+
var del = require('del');
5+
6+
var runSequence = require('run-sequence');
7+
8+
var gulp = require('gulp');
9+
var $ = require('gulp-load-plugins')();
10+
11+
var pkg = require('./package.json');
12+
13+
// 路径配置信息
14+
var config = {
15+
path: {
16+
less: [
17+
'./less/mui.less',
18+
],
19+
fonts: './fonts/*',
20+
js: [
21+
'js/mui.js',
22+
'js/mui.detect.js',
23+
'js/mui.detect.5+.js',
24+
'js/mui.event.js',
25+
'js/mui.target.js',
26+
'js/mui.fixed.js',
27+
'js/mui.fixed.bind.js',
28+
'js/mui.fixed.classlist.js',
29+
'js/mui.fixed.animation.js',
30+
'js/mui.fixed.fastclick.js',
31+
'js/mui.fixed.keyboard.js',
32+
'js/mui.namespace.js',
33+
'js/mui.gestures.js',
34+
'js/mui.gestures.flick.js',
35+
'js/mui.gestures.swipe.js',
36+
'js/mui.gestures.drag.js',
37+
'js/mui.gestures.tap.js',
38+
'js/mui.gestures.longtap.js',
39+
'js/mui.gestures.hold.js',
40+
'js/mui.gestures.pinch.js',
41+
'js/mui.init.js',
42+
'js/mui.init.5+.js',
43+
'js/mui.back.js',
44+
'js/mui.back.5+.js',
45+
'js/mui.init.pullrefresh.js',
46+
'js/mui.ajax.js',
47+
'js/mui.ajax.5+.js',
48+
'js/mui.layout.js',
49+
'js/mui.animation.js',
50+
'js/mui.class.js',
51+
'js/mui.pullRefresh.js',
52+
'js/mui.class.scroll.js',
53+
'js/mui.class.scroll.pullrefresh.js',
54+
'js/mui.class.scroll.slider.js',
55+
'js/pullrefresh.5+.js',
56+
'js/mui.offcanvas.js',
57+
'js/actions.js',
58+
'js/modals.js',
59+
'js/popovers.js',
60+
'js/segmented-controllers.js',
61+
'js/switches.js',
62+
'js/tableviews.js',
63+
'js/mui.dialog.alert.js',
64+
'js/mui.dialog.confirm.js',
65+
'js/mui.dialog.prompt.js',
66+
'js/mui.dialog.toast.js',
67+
'js/mui.popup.js',
68+
'js/input.plugin.js',
69+
'js/mui.number.js'
70+
71+
]
72+
},
73+
dist: {
74+
js: './dist/js',
75+
css: './dist/css',
76+
fonts: './dist/fonts'
77+
},
78+
uglify: {
79+
compress: {
80+
warnings: false
81+
},
82+
output: {
83+
ascii_only: true
84+
}
85+
}
86+
};
87+
88+
var dateFormat = 'isoDateTime';
89+
90+
var banner = [
91+
'/*!',
92+
' * =====================================================',
93+
' * Mui v<%= pkg.version %> (<%= pkg.homepage %>)',
94+
' * Licensed under <%= pkg.license %> | ' + $.util.date(Date.now(), dateFormat),
95+
' * =====================================================',
96+
' */\n'
97+
].join('\n');
98+
99+
// clean
100+
gulp.task('build:clean', function() {
101+
return del([
102+
config.dist.css,
103+
config.dist.js
104+
]);
105+
});
106+
107+
// build less
108+
gulp.task('build:less', function() {
109+
gulp.src(config.path.less)
110+
.pipe($.header(banner, {pkg: pkg, ver: ''}))
111+
.pipe($.plumber({errorHandler: function(err) {
112+
console.log(err);
113+
this.emit('end');
114+
}}))
115+
.pipe($.less({
116+
paths: [ path.join(__dirname, 'less') ]
117+
}))
118+
.pipe($.csscomb({configPath: path.join(__dirname, ".csscomb.json")}))
119+
.pipe(gulp.dest(config.dist.css))
120+
.pipe($.size({showFiles: true, title: 'source'}))
121+
.pipe($.minifyCss({noAdvanced: true}))
122+
.pipe($.rename({
123+
suffix: '.min',
124+
extname: '.css'
125+
}))
126+
.pipe(gulp.dest(config.dist.css))
127+
.pipe($.size({showFiles: true, title: 'minified'}))
128+
.pipe($.size({showFiles: true, gzip: true, title: 'gzipped'}));
129+
});
130+
131+
// build fonts
132+
gulp.task('build:fonts', function() {
133+
gulp.src(config.path.fonts)
134+
.pipe(gulp.dest(config.dist.fonts));
135+
});
136+
137+
// build js
138+
gulp.task('build:js', function() {
139+
gulp.src(config.path.js)
140+
.pipe($.concat('mui.js'))
141+
.pipe($.header(banner, {pkg: pkg, ver: ''}))
142+
.pipe(gulp.dest(config.dist.js))
143+
.pipe($.size({showFiles: true, title: 'source'}))
144+
.pipe($.uglify(config.uglify))
145+
.pipe($.header(banner, {pkg: pkg, ver: ''}))
146+
.pipe($.rename({suffix: '.min'}))
147+
.pipe(gulp.dest(config.dist.js))
148+
.pipe($.size({showFiles: true, title: 'minified'}))
149+
.pipe($.size({showFiles: true, gzip: true, title: 'gzipped'}));
150+
});
151+
152+
// build
153+
gulp.task('build', function(cb) {
154+
runSequence(
155+
'build:clean',
156+
['build:less', 'build:fonts', 'build:js'],
157+
cb);
158+
});
159+
160+
// watch
161+
gulp.task('watch', function() {
162+
gulp.watch(['js/*.js'], ['build:js']);
163+
gulp.watch(['less/**/*.less'], ['build:less']);
164+
});
165+
166+
// default
167+
gulp.task('default', ['build']);

‎less/badges.less

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
//
2+
// Badges
3+
// --------------------------------------------------
4+
.@{namespace}badge {
5+
display: inline-block;
6+
padding: 3px 6px;
7+
font-size: 12px;
8+
line-height: 1;
9+
color: #333;
10+
background-color: rgba(0,0,0,.15);
11+
border-radius: 100px;
12+
13+
// Inverted badges have no background.
14+
&.@{namespace}badge-inverted {
15+
padding: 0 5px 0 0;
16+
color: @default-color;
17+
background-color: transparent;
18+
}
19+
}
20+
21+
22+
// Badge modifiers
23+
// --------------------------------------------------
24+
25+
// Main badge
26+
.@{namespace}badge-primary,.@{namespace}badge-blue {
27+
color: #fff;
28+
background-color: @primary-color;
29+
30+
&.@{namespace}badge-inverted {
31+
color: @primary-color;
32+
background-color: transparent;
33+
}
34+
}
35+
36+
// success badge
37+
.@{namespace}badge-success,.@{namespace}badge-green {
38+
color: #fff;
39+
background-color: @positive-color;
40+
41+
&.@{namespace}badge-inverted {
42+
color: @positive-color;
43+
background-color: transparent;
44+
}
45+
}
46+
//waring
47+
.@{namespace}badge-warning,.@{namespace}badge-yellow {
48+
color: #fff;
49+
background-color: @warning-color;
50+
51+
&.@{namespace}badge-inverted {
52+
color: @warning-color;
53+
background-color: transparent;
54+
}
55+
}
56+
57+
// Negative badge
58+
.@{namespace}badge-danger,.@{namespace}badge-red {
59+
color: #fff;
60+
background-color: @negative-color;
61+
62+
&.@{namespace}badge-inverted {
63+
color: @negative-color;
64+
background-color: transparent;
65+
}
66+
}
67+
68+
.@{namespace}badge-royal,.@{namespace}badge-purple {
69+
color: #fff;
70+
background-color: @royal-color;
71+
72+
&.@{namespace}badge-inverted {
73+
color: @royal-color;
74+
background-color: transparent;
75+
}
76+
}
77+
78+
.@{namespace}icon .@{namespace}badge{
79+
position: absolute;
80+
left: 100%;
81+
margin-left: -10px;
82+
top: -2px;
83+
font-size: 10px;
84+
line-height: 1.4;
85+
padding: 1px 5px;
86+
background: red;
87+
color: white;
88+
}

0 commit comments

Comments
 (0)