Skip to content

Commit

Permalink
增加less和gulp
Browse files Browse the repository at this point in the history
1、增加less,降低配置sass环境的复杂过程
2、增加gulp打包方式,打包更容易
  • Loading branch information
iwx committed Jan 9, 2016
1 parent 6c300c5 commit c0064d8
Show file tree
Hide file tree
Showing 37 changed files with 4,742 additions and 3 deletions.
10 changes: 10 additions & 0 deletions .csscomb.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"always-semicolon": false,
"block-indent": 4,
"space-between-declarations": "\n",
"space-after-opening-brace": "\n",
"space-before-closing-brace": "\n",
"leading-zero": true,
"strip-spaces": true,
"vendor-prefix-align": true
}
167 changes: 167 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
'use strict';

var path = require('path');
var del = require('del');

var runSequence = require('run-sequence');

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

var pkg = require('./package.json');

// 路径配置信息
var config = {
path: {
less: [
'./less/mui.less',
],
fonts: './fonts/*',
js: [
'js/mui.js',
'js/mui.detect.js',
'js/mui.detect.5+.js',
'js/mui.event.js',
'js/mui.target.js',
'js/mui.fixed.js',
'js/mui.fixed.bind.js',
'js/mui.fixed.classlist.js',
'js/mui.fixed.animation.js',
'js/mui.fixed.fastclick.js',
'js/mui.fixed.keyboard.js',
'js/mui.namespace.js',
'js/mui.gestures.js',
'js/mui.gestures.flick.js',
'js/mui.gestures.swipe.js',
'js/mui.gestures.drag.js',
'js/mui.gestures.tap.js',
'js/mui.gestures.longtap.js',
'js/mui.gestures.hold.js',
'js/mui.gestures.pinch.js',
'js/mui.init.js',
'js/mui.init.5+.js',
'js/mui.back.js',
'js/mui.back.5+.js',
'js/mui.init.pullrefresh.js',
'js/mui.ajax.js',
'js/mui.ajax.5+.js',
'js/mui.layout.js',
'js/mui.animation.js',
'js/mui.class.js',
'js/mui.pullRefresh.js',
'js/mui.class.scroll.js',
'js/mui.class.scroll.pullrefresh.js',
'js/mui.class.scroll.slider.js',
'js/pullrefresh.5+.js',
'js/mui.offcanvas.js',
'js/actions.js',
'js/modals.js',
'js/popovers.js',
'js/segmented-controllers.js',
'js/switches.js',
'js/tableviews.js',
'js/mui.dialog.alert.js',
'js/mui.dialog.confirm.js',
'js/mui.dialog.prompt.js',
'js/mui.dialog.toast.js',
'js/mui.popup.js',
'js/input.plugin.js',
'js/mui.number.js'

]
},
dist: {
js: './dist/js',
css: './dist/css',
fonts: './dist/fonts'
},
uglify: {
compress: {
warnings: false
},
output: {
ascii_only: true
}
}
};

var dateFormat = 'isoDateTime';

var banner = [
'/*!',
' * =====================================================',
' * Mui v<%= pkg.version %> (<%= pkg.homepage %>)',
' * Licensed under <%= pkg.license %> | ' + $.util.date(Date.now(), dateFormat),
' * =====================================================',
' */\n'
].join('\n');

// clean
gulp.task('build:clean', function() {
return del([
config.dist.css,
config.dist.js
]);
});

// build less
gulp.task('build:less', function() {
gulp.src(config.path.less)
.pipe($.header(banner, {pkg: pkg, ver: ''}))
.pipe($.plumber({errorHandler: function(err) {
console.log(err);
this.emit('end');
}}))
.pipe($.less({
paths: [ path.join(__dirname, 'less') ]
}))
.pipe($.csscomb({configPath: path.join(__dirname, ".csscomb.json")}))
.pipe(gulp.dest(config.dist.css))
.pipe($.size({showFiles: true, title: 'source'}))
.pipe($.minifyCss({noAdvanced: true}))
.pipe($.rename({
suffix: '.min',
extname: '.css'
}))
.pipe(gulp.dest(config.dist.css))
.pipe($.size({showFiles: true, title: 'minified'}))
.pipe($.size({showFiles: true, gzip: true, title: 'gzipped'}));
});

// build fonts
gulp.task('build:fonts', function() {
gulp.src(config.path.fonts)
.pipe(gulp.dest(config.dist.fonts));
});

// build js
gulp.task('build:js', function() {
gulp.src(config.path.js)
.pipe($.concat('mui.js'))
.pipe($.header(banner, {pkg: pkg, ver: ''}))
.pipe(gulp.dest(config.dist.js))
.pipe($.size({showFiles: true, title: 'source'}))
.pipe($.uglify(config.uglify))
.pipe($.header(banner, {pkg: pkg, ver: ''}))
.pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest(config.dist.js))
.pipe($.size({showFiles: true, title: 'minified'}))
.pipe($.size({showFiles: true, gzip: true, title: 'gzipped'}));
});

// build
gulp.task('build', function(cb) {
runSequence(
'build:clean',
['build:less', 'build:fonts', 'build:js'],
cb);
});

// watch
gulp.task('watch', function() {
gulp.watch(['js/*.js'], ['build:js']);
gulp.watch(['less/**/*.less'], ['build:less']);
});

// default
gulp.task('default', ['build']);
88 changes: 88 additions & 0 deletions less/badges.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
//
// Badges
// --------------------------------------------------
.@{namespace}badge {
display: inline-block;
padding: 3px 6px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0,0,0,.15);
border-radius: 100px;

// Inverted badges have no background.
&.@{namespace}badge-inverted {
padding: 0 5px 0 0;
color: @default-color;
background-color: transparent;
}
}


// Badge modifiers
// --------------------------------------------------

// Main badge
.@{namespace}badge-primary,.@{namespace}badge-blue {
color: #fff;
background-color: @primary-color;

&.@{namespace}badge-inverted {
color: @primary-color;
background-color: transparent;
}
}

// success badge
.@{namespace}badge-success,.@{namespace}badge-green {
color: #fff;
background-color: @positive-color;

&.@{namespace}badge-inverted {
color: @positive-color;
background-color: transparent;
}
}
//waring
.@{namespace}badge-warning,.@{namespace}badge-yellow {
color: #fff;
background-color: @warning-color;

&.@{namespace}badge-inverted {
color: @warning-color;
background-color: transparent;
}
}

// Negative badge
.@{namespace}badge-danger,.@{namespace}badge-red {
color: #fff;
background-color: @negative-color;

&.@{namespace}badge-inverted {
color: @negative-color;
background-color: transparent;
}
}

.@{namespace}badge-royal,.@{namespace}badge-purple {
color: #fff;
background-color: @royal-color;

&.@{namespace}badge-inverted {
color: @royal-color;
background-color: transparent;
}
}

.@{namespace}icon .@{namespace}badge{
position: absolute;
left: 100%;
margin-left: -10px;
top: -2px;
font-size: 10px;
line-height: 1.4;
padding: 1px 5px;
background: red;
color: white;
}
Loading

0 comments on commit c0064d8

Please sign in to comment.