This repository has been archived by the owner on Dec 16, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
gulpfile.js
107 lines (103 loc) · 3.64 KB
/
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const gulp = require('gulp');
const babel = require('gulp-babel');
const postcss = require('gulp-postcss');
const tslint = require("gulp-tslint");
gulp.task('css', () => {
const plugins = [
require('stylelint')({}),
require('postcss-pxtorem')({
propWhiteList: [
'font',
'font-size',
'line-height',
'letter-spacing',
'margin',
'margin-left',
'margin-right',
'margin-top',
'margin-bottom',
'padding',
'padding-left',
'padding-right',
'padding-top',
'padding-bottom',
'top',
'left',
'right',
'bottom',
],
}),
require('postcss-at2x')(),
require('postcss-font-normalize')(),
require('postcss-flexbugs-fixes')(),
require('postcss-simple-vars')({
variables: {
// screens
'$xsmall-up': 'only screen',
// max-width 480px, tiny mobile-only styles, use when QAing mobile issues
'$xsmall-only': 'only screen and (max-width: 30em)',
// min-width 961px, mobile screens
'$small-up': 'only screen and (min-width: 60.0625em)',
// min-width 481px and max-width 960px, mobile-only styles, use when QAing mobile issues
'$small-only': 'only screen and (min-width: 30.0625em) and (max-width: 60em)',
// min-width 1281px, tablet screens
'$medium-up': 'only screen and (min-width: 80.0625em)',
// min-width 961px and max-width 1280px, use when QAing tablet-only issues
'$medium-only': 'only screen and (min-width: 60.0625em) and (max-width: 80em)',
// min-width 1601px, large screens
'$large-up': 'only screen and (min-width: 100.0625em)',
// min-width 1281px and max-width 1600px, use when QAing large screen-only issues
'$large-only': 'only screen and (min-width: 80.0625em) and (max-width: 100em)',
// min-width 1921px, xlarge screens
'$xlarge-up': 'only screen and (min-width: 120.0625em)',
// min-width 1600px and max-width 1920, use when QAing xlarge screen-only issues
'$xlarge-only': 'only screen and (min-width: 100.0625em) and (max-width: 120em)',
// Portrait
$portrait: 'screen and (orientation:portrait)',
// Landscape
$landscape: 'screen and (orientation:landscape)',
// Retina
$retina: 'only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min$moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)',
// column gutter
// 0.75/2rem
'$column-gutter-xsmall': '0.375rem',
// 1.5/2rem
'$column-gutter-small': '0.75rem',
// 2.5/2rem
'$column-gutter-medium': '1.125rem',
// 3/2rem
'$column-gutter-large': '1.5rem',
// 3.75/2rem
'$column-gutter-xlarge': '1.875rem',
// use these for margins and paddings
'$margin-xsmall': '0.75rem',
'$margin-small': '1.5rem',
'$margin-default': '2.5rem',
'$margin-large': '3rem',
'$margin-xlarge': '3.75rem',
},
}),
require('css-mqpacker')(),
require('postcss-fixes')(),
require('postcss-line-height-px-to-unitless')(),
require('autoprefixer')(),
require('postcss-reporter')({
clearMessages: true,
}),
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
gulp.task('javascript', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['env'],
}))
.pipe(gulp.dest('dist')),
);
gulp.task("tslint", () =>
gulp.src("source.ts")
.pipe(tslint({}))
.pipe(tslint.report())
);