-
Notifications
You must be signed in to change notification settings - Fork 1
/
gulpfile.js
230 lines (198 loc) · 6.27 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
'use strict'
var gulp = require('gulp');
var fs = require('fs');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var webpack = require('webpack');
// http://browsersync.io/
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// https://github.com/floridoo/gulp-sourcemaps
var sourcemaps = require('gulp-sourcemaps');
// https://github.com/stevelacy/gulp-stylus
var stylus = require('gulp-stylus');
// https://github.com/wearefractal/gulp-concat
var concat = require('gulp-concat');
// https://www.npmjs.com/package/gulp-just-replace/
var replace = require('gulp-just-replace');
var gulpUniqueFile = require('gulp-unique-files');
var pathMap = require('gulp-pathmap');
//make inline svg
var svgSymbols = require('gulp-svg-symbols');
var through = require('through2');
// eslint src code
let notifier = require('node-notifier')
let CLIEngine = require('eslint').CLIEngine;
function eslint() {
let cli = new CLIEngine({
useEslintrc: true
})
let report = cli.executeOnFiles(['src/**/*.js'])
let tableFormatter = cli.getFormatter('table')
if (report.errorCount || report.warningCount) {
console.log('The eslint went wrong')
console.log(tableFormatter(report.results))
notifier.notify({
title: 'Tingle Notification',
message: `${report.errorCount} errors and ${report.warningCount} warnings found, please view terminal.`
})
return false
}
return true
}
gulp.task('pack_demo', function(cb) {
let eslintRes = eslint()
if (eslintRes) {
webpack(require('./webpack.dev.js'), function (err, stats) {
// 重要 打包过程中的语法错误反映在stats中
console.log('webpack log:' + stats);
if (stats.hasErrors()) {
// 异常日志打印到屏幕
fs.writeFileSync('./dist/demo.js', [
'document.body.innerHTML="<pre>',
stats.toJson().errors[0].replace(/[\n\r]/g, '<br>').replace(/\[\d+m/g, '').replace(/"/g, '\\"'),
'</pre>";',
'document.body.firstChild.style.fontFamily="monospace";',
'document.body.firstChild.style.lineHeight="1.5em";',
'document.body.firstChild.style.margin="1em";',
].join(''));
}
console.info('###### pack_demo done ######');
cb();
});
} else {
cb('eslint error');
}
});
gulp.task('stylus_component', function(cb) {
gulp.src(['./src/**/*.styl'])
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./src'));
console.info('###### stylus_component done ######');
cb();
});
gulp.task('stylus_demo', function(cb) {
gulp.src([
'./node_modules/tingle-style/dist/tingle.css', // tingle基础样式
'./node_modules/tingle-!(style)*/src/*.css', // 依赖包样式
'./tingle/tingle-!(style)*/src/*.css', // submodule样式, tingle-style不支持submodule方式使用
'./demo/src/**/*.styl'
])
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(concat('demo.css'))
.pipe(replace([{
search: /\/\*#\ssourceMappingURL=([^\*\/]+)\.map\s\*\//g,
replacement: '/* end for `$1` */\n'
}]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./demo/dist'));
console.info('###### stylus_demo done ######');
cb();
});
// 命名方式是 xxx.svg, 会把fill都干掉
// 命名方式是 xxx.color.svg, 会保留svg中的颜色
// 命名方式是 xxx.ignore.svg, 会忽略该svg文件
function svgFilter() {
return through.obj(function(file, enc, cb) {
// console.log(file.path + ':\n');
if (!!file.path.match(/\.color\.svg$/)) {
//console.log('file.path');
file.path = file.path.replace(/\.color\.svg$/, '.svg');
} else if (!!file.path.match(/\.ignore\.svg$/)) {
cb();
return;
} else {
var fileContent = file.contents.toString();
// FIXME 这个地方还要增强, `illustrator`和`sketch`导出的`svg`文件, 表示颜色的方式不一致!!!
file.contents = new Buffer(fileContent.replace(/\sfill="[^"]*\"\s?/g, ' '));
}
this.push(file);
cb();
});
}
gulp.task('svg', function () {
return gulp.src([
// TODO 这个地方要考虑多皮肤
'./node_modules/tingle-*/src/svg/**/*.svg',
'./node_modules/@ali/tingle-*/src/svg/**/*.svg',
'./tingle/tingle-*/src/svg/**/*.svg',
'./demo/src/svg/**/*.svg',
'./src/svg/**/*.svg',
])
.pipe(pathMap('%f'))
.pipe(gulpUniqueFile())
.pipe(svgFilter())
.pipe(svgSymbols({
templates: ['default-svg']
}))
.pipe(gulp.dest('./demo/dist'));
});
gulp.task('reload_by_js', ['pack_demo'], function () {
reload();
}).on('error', (err) => console.log(err))
gulp.task('reload_by_component_css', ['stylus_component'], function () {
reload();
})
gulp.task('reload_by_demo_css', ['stylus_demo'], function () {
reload();
})
gulp.task('reload_by_svg', ['svg'], function () {
reload();
})
// 开发`Tingle component`时,执行`gulp develop` or `gulp d`
gulp.task('develop', [
'pack_demo',
'stylus_component',
'stylus_demo',
'svg'
], function() {
browserSync({
server: {
baseDir: './'
},
open: 'external'
});
gulp.watch(['src/**/*.js', 'demo/src/**/*.js'], ['reload_by_js']);
gulp.watch('src/**/*.styl', ['reload_by_component_css']);
gulp.watch('demo/src/**/*.styl', ['reload_by_demo_css']);
// 监听svg icon文件的变化
gulp.watch([
'src/svg/tingle/*.svg', // 来自tingle提供的icon
'src/svg/custom/*.svg' // 控件自定义的icon
], ['reload_by_svg']);
})
// 构建css
gulp.task('build_css', function(cb) {
gulp.src(['./src/**/Button.styl'])
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist'));
console.info('###### build_css done ######');
cb();
})
// 构建js
gulp.task('build_js', function () {
let eslintRes = eslint()
if (eslintRes) {
return gulp.src(__dirname + '/src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015', 'stage-1', 'react']
}))
//.pipe(uglify())
// 独立的map文件不起作用, 先写到build后的js文件里
// http://stackoverflow.com/questions/27671390/why-to-inline-source-maps
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'))
}
return false
})
// 快捷方式
gulp.task('d', ['develop'])
gulp.task('b', ['build_js', 'build_css'])
// 保留nowa的命令
gulp.task('server', ['develop'])