gulpfile.js
3.29 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
/**
* Yohobuy 构建脚本
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/4/25
*/
'use strict';
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
const cssnano = require('gulp-cssnano');
const env = {
dev: Symbol('development'),
pro: Symbol('production')
};
const config = require('../package.json');
const ftpConfig = {
host: '218.94.75.50',
user: 'php',
pass: 'yoho9646'
};
const distRoot = `dist/${config.name}`;
const dist = {
js: `${distRoot}/${config.version}`,
css: `${distRoot}/${config.version}`,
assets: `${distRoot}/assets`,
img: `${distRoot}/assets/img`,
font: `${distRoot}/assets/font`
};
/**
* postcss plugins for both dev and pro
* @parem et Symbol
*/
const postcssPlugin = (et) => {
var sprites = {
spritesmith: {
padding: 2
},
groupBy(file) {
var group = file.url.split('/')[0];
group = group === '' ? 'yo' : group;
return group ? Promise.resolve(group) : Promise.reject(group);
}
},
assets,
plugins;
// assets & sprites config in both dev and pro
if (et === env.pro) {
assets = {
loadPaths: [dist.img, dist.font],
};
Object.assign(sprites, {
basePath: dist.img,
stylesheetPath: dist.css,
spritePath: dist.img
});
} else if (et === env.dev) {
assets = {
loadPaths: ['img/', 'font/'],
relativeTo: 'css/'
};
Object.assign(sprites, {
basePath: 'img/',
stylesheetPath: 'css/',
spritePath: 'img/'
});
};
plugins = [
require('autoprefixer')({
browsers: ['> 1%']
}),
require('precss'),
require('postcss-sprites').default(sprites),
require('postcss-assets')(assets),
require('postcss-calc'),
require('postcss-opacity'),
//可选
require('postcss-use')({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
if (et === env.pro) {
plugins.push(require('postcss-cachebuster')({
imagesPath: `/${dist.img}`,
cssPath: `/${dist.css}`
}));
}
return plugins;
};
// postcss compile in dev
gulp.task('postcss-dev', () => {
return gulp.src('scss/index.css')
.pipe(sourcemaps.init())
.pipe(postcssPlugin(env.dev))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css/'));
});
// postcss file watch
gulp.task('postcss-watch', () => {
gulp.watch('scss/**/*.css', ['postcss-dev']);
});
// copy assets
gulp.task('assets', ['img', 'font']);
// copy img
gulp.task('img', () => {
return gulp.src('img/**/*')
.pipe(gulp.dest(dist.img));
});
//copy font
gulp.task('font', () => {
return gulp.src('font/*')
.pipe(gulp.dest(dist.font));
});
// postcss compile in pro
gulp.task('postcss', ['assets'], () => {
return gulp.src('scss/index.css')
.pipe(postcssPlugin(env.pro))
.pipe(cssnano())
.pipe(gulp.dest(dist.css));
});