gulpfile.js
6.86 KB
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
/**
* GULP-FILE
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/9/30
*/
var gulp = require('gulp'),
cp = require('child_process');
var fs = require('fs'),
ftp = require('gulp-ftp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
Package = require('father').SpmPackage,
transport = require('gulp-spm'),
concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var cssnano = require('gulp-cssnano');
var config = require('./package');
var rootDist = 'dist/myohobuy/',
ftpConfig = {
host: '218.94.75.58',
user: 'php',
pass: 'yoho9646'
};
var distDir = {
js: rootDist + config.version,
css: rootDist + config.version,
img: rootDist + 'assets/img',
font: rootDist + 'assets/font'
};
gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);
//根据环境变量生成postcss插件配置
function postcssEnvPlugin(env) {
var sprites = {
spritesmith: {
padding: 4
},
groupBy: function(file) {
// 根据目录分组,防止合并后的图片太大
var group = file.url.split('/')[1];
file.retina = true; // H5 强制所有图片都是用二倍图
return group ? Promise.resolve(group) : Promise.reject();
},
filterBy: function(file) {
//使用resolve转化后静态资源生成../img或者../assets/img/的路径
if (/\/img/.test(file.url) || /data:image/.test(file.url)) {
return Promise.reject();
}
return Promise.resolve();
}
},
assets;
if (env === 'DEV') {
assets = {
loadPaths: ['font/', 'img/'],
relativeTo: 'css/'
};
Object.assign(sprites, {
basePath: './img',
stylesheetPath: './css',
spritePath: './img'
});
} else if (env === 'PRO') {
assets = {
loadPaths: [distDir.img, distDir.font],
relativeTo: distDir.css,
cachebuster: function(filePath, urlPathname) {
//只给字体加no-cache
if (/font\//.test(urlPathname)) {
return fs.statSync(filePath).mtime.getTime().toString(16);
}
}
};
Object.assign(sprites, {
basePath: distDir.img,
stylesheetPath: distDir.css,
spritePath: distDir.img
});
}
return [
require('precss'),
require('postcss-assets')(assets),
require('postcss-sprites').default(sprites),
require('postcss-calc'),
require('postcss-pxtorem')({
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2px 时,不转换, 单位为 PX 大写的时候不转换
selectorBlackList: [], // 选择器黑名单,可以使用正则
propWhiteList: [] // 属性名称为空,表示替换所有属性的值
}),
require('autoprefixer')({
add: true,
browsers: ['> 1%']
}),
//可选
require('postcss-use')({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
}
//Postcss开发环境
gulp.task('postcss-dev', function() {
return gulp.src('sass/index.css')
.pipe(sourcemaps.init())
.pipe(postcss(postcssEnvPlugin('DEV')))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css/'))
});
gulp.task('postcss-watch', function() {
gulp.watch('sass/**/*.css', ['postcss-dev']);
});
//Postcss正式环境生成
gulp.task('postcss-pro', ['assets'], function() {
return gulp.src('sass/index.css')
.pipe(postcss(postcssEnvPlugin('PRO')))
.pipe(cssnano())
.pipe(gulp.dest(distDir.css))
});
// start spm server
gulp.task('spm-doc', function() {
var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001,H5 用8000, 跑两个服务器,不冲突
// sd.stdout.on('data', function(data) {
// console.log(data);
// });
sd.stderr.on('data', function(data) {
console.log(data);
});
sd.on('exit', function(code) {
console.log('process spm doc exit with code ' + code);
});
});
//生成发布目录,可用于上传测试机
gulp.task('ge', ['assets', 'postcss-pro', 'build']);
//发布
gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
var ftpstream = ftp(ftpConfig);
return gulp.src('dist/**/')
.pipe(ftpstream)
.pipe(gutil.noop());
});
//font+img->dist/assets
gulp.task('assets', ['img', 'font']);
gulp.task('img', function() {
return gulp.src('img/**/*')
.pipe(gulp.dest(distDir.img));
});
gulp.task('font', function() {
return gulp.src('font/*')
.pipe(gulp.dest(distDir.font))
});
//spm build
gulp.task('build', ['libs', 'business']);
//libs
gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);
gulp.task('pre-libs', function() {
var obj = {
name: '',
version: config.version,
spm: config.spm
};
var packages = [],
libsjs = '';
var libCon, key, i;
var pkg;
obj.spm.main = 'libs.js';
obj.spm.buildArgs = '--idleading {{}} --include all';
libCon = JSON.stringify(obj);
fs.renameSync('package.json', 'package.bak.json');
fs.writeFileSync('package.json', libCon);
for (key in obj.spm.dependencies) {
if (obj.spm.inside && obj.spm.inside[key]) {
packages.push(obj.spm.inside[key]);
} else {
packages.push(key);
}
}
for (i = 0; i < packages.length; i++) {
libsjs += 'require("' + packages[i] + '");';
}
fs.writeFileSync('libs.js', libsjs); //重写入口文件
pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(gulp.dest(distDir.js));
});
gulp.task('concat-min-libs', ['pre-libs'], function() {
var path = distDir.js + '/libs.js';
var jsStr = fs.readFileSync(path).toString();
fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
return gulp.src(['plugin/sea.js', distDir.js + '/libs.js'])
.pipe(concat('lib.js'))
.pipe(uglify())
.pipe(gulp.dest(distDir.js));
});
gulp.task('clear-libs', ['concat-min-libs'], function() {
fs.renameSync('package.bak.json', 'package.json');
fs.unlinkSync('./libs.js');
fs.unlinkSync(distDir.js + '/libs.js');
});
gulp.task('business', ['libs'], function() {
var pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(concat('index-debug.js'))
.pipe(gulp.dest(distDir.js))
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest(distDir.js));
});