|
1
|
-/**
|
|
|
|
2
|
- * Yohobuy 构建脚本
|
|
|
|
3
|
- * @author: xuqi<qi.xu@yoho.cn>
|
|
|
|
4
|
- * @date: 2016/4/25
|
|
|
|
5
|
- */
|
|
|
|
6
|
-
|
|
|
|
7
|
-'use strict';
|
|
|
|
8
|
-
|
|
|
|
9
|
-const gulp = require('gulp');
|
|
|
|
10
|
-const gutil = require('gulp-util');
|
|
|
|
11
|
-const ftp = require('gulp-ftp');
|
|
|
|
12
|
-
|
|
|
|
13
|
-const postcss = require('gulp-postcss');
|
|
|
|
14
|
-const sourcemaps = require('gulp-sourcemaps');
|
|
|
|
15
|
-const cssnano = require('gulp-cssnano');
|
|
|
|
16
|
-
|
|
|
|
17
|
-const webpack = require('webpack');
|
|
|
|
18
|
-const webpackDevServer = require('webpack-dev-server');
|
|
|
|
19
|
-const webpackConfig = require('./webpack.config.js');
|
|
|
|
20
|
-
|
|
|
|
21
|
-const env = {
|
|
|
|
22
|
- dev: Symbol('development'),
|
|
|
|
23
|
- pro: Symbol('production')
|
|
|
|
24
|
-};
|
|
|
|
25
|
-
|
|
|
|
26
|
-const config = require('../package.json');
|
|
|
|
27
|
-const ftpConfig = {
|
|
|
|
28
|
- host: '218.94.75.50',
|
|
|
|
29
|
- user: 'php',
|
|
|
|
30
|
- pass: 'yoho9646'
|
|
|
|
31
|
-};
|
|
|
|
32
|
-const distRoot = `dist/${config.name}`;
|
|
|
|
33
|
-const dist = {
|
|
|
|
34
|
- js: `${distRoot}/${config.version}`,
|
|
|
|
35
|
- css: `${distRoot}/${config.version}`,
|
|
|
|
36
|
- assets: `${distRoot}/assets`,
|
|
|
|
37
|
- img: `${distRoot}/assets/img`,
|
|
|
|
38
|
- font: `${distRoot}/assets/font`
|
|
|
|
39
|
-};
|
|
|
|
40
|
-
|
|
|
|
41
|
-/**
|
|
|
|
42
|
- * postcss plugins for both dev and pro
|
|
|
|
43
|
- * @parem et Symbol
|
|
|
|
44
|
- */
|
|
|
|
45
|
-const postcssPlugin = (et) => {
|
|
|
|
46
|
- var sprites = {
|
|
|
|
47
|
- spritesmith: {
|
|
|
|
48
|
- padding: 2
|
|
|
|
49
|
- },
|
|
|
|
50
|
- groupBy(file) {
|
|
|
|
51
|
- var group = file.url.split('/')[1];
|
|
|
|
52
|
-
|
|
|
|
53
|
- group = group === '' ? 'yo' : group;
|
|
|
|
54
|
-
|
|
|
|
55
|
- return group ? Promise.resolve(group) : Promise.reject(group);
|
|
|
|
56
|
- }
|
|
|
|
57
|
- },
|
|
|
|
58
|
- assets,
|
|
|
|
59
|
- plugins;
|
|
|
|
60
|
-
|
|
|
|
61
|
- // assets & sprites config in both dev and pro
|
|
|
|
62
|
- if (et === env.pro) {
|
|
|
|
63
|
- assets = {
|
|
|
|
64
|
- loadPaths: [dist.img, dist.font],
|
|
|
|
65
|
- };
|
|
|
|
66
|
-
|
|
|
|
67
|
- Object.assign(sprites, {
|
|
|
|
68
|
- basePath: dist.img,
|
|
|
|
69
|
- stylesheetPath: dist.css,
|
|
|
|
70
|
- spritePath: dist.img
|
|
|
|
71
|
- });
|
|
|
|
72
|
- } else if (et === env.dev) {
|
|
|
|
73
|
- assets = {
|
|
|
|
74
|
- loadPaths: ['img/', 'font/'],
|
|
|
|
75
|
- relativeTo: 'css/'
|
|
|
|
76
|
- };
|
|
|
|
77
|
-
|
|
|
|
78
|
- Object.assign(sprites, {
|
|
|
|
79
|
- basePath: 'img/',
|
|
|
|
80
|
- stylesheetPath: 'css/',
|
|
|
|
81
|
- spritePath: 'img/'
|
|
|
|
82
|
- });
|
|
|
|
83
|
- };
|
|
|
|
84
|
-
|
|
|
|
85
|
- plugins = [
|
|
|
|
86
|
- require('autoprefixer')({
|
|
|
|
87
|
- browsers: ['> 1%']
|
|
|
|
88
|
- }),
|
|
|
|
89
|
- require('precss'),
|
|
|
|
90
|
- require('postcss-sprites').default(sprites),
|
|
|
|
91
|
- require('postcss-assets')(assets),
|
|
|
|
92
|
- require('postcss-calc'),
|
|
|
|
93
|
- require('postcss-opacity'),
|
|
|
|
94
|
-
|
|
|
|
95
|
- //可选
|
|
|
|
96
|
- require('postcss-use')({
|
|
|
|
97
|
- modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
|
|
|
|
98
|
- })
|
|
|
|
99
|
- ];
|
|
|
|
100
|
-
|
|
|
|
101
|
- if (et === env.pro) {
|
|
|
|
102
|
- plugins.push(require('postcss-cachebuster')({
|
|
|
|
103
|
- imagesPath: `/${dist.img}`,
|
|
|
|
104
|
- cssPath: `/${dist.css}`
|
|
|
|
105
|
- }));
|
|
|
|
106
|
- }
|
|
|
|
107
|
- return plugins;
|
|
|
|
108
|
-};
|
|
|
|
109
|
-
|
|
|
|
110
|
-// default
|
|
|
|
111
|
-gulp.task('default', ['postcss-dev', 'postcss-watch', 'webpack-dev-server']);
|
|
|
|
112
|
-
|
|
|
|
113
|
-// ge
|
|
|
|
114
|
-gulp.task('ge', ['postcss', 'webpack']);
|
|
|
|
115
|
-
|
|
|
|
116
|
-// dist
|
|
|
|
117
|
-gulp.task('dist', ['ge'], () => {
|
|
|
|
118
|
- var ftpstream = ftp(ftpConfig);
|
|
|
|
119
|
-
|
|
|
|
120
|
- return gulp.src('dist/**/')
|
|
|
|
121
|
- .pipe(ftpstream)
|
|
|
|
122
|
- .pipe(gutil.noop());
|
|
|
|
123
|
-});
|
|
|
|
124
|
-
|
|
|
|
125
|
-// postcss compile in dev
|
|
|
|
126
|
-gulp.task('postcss-dev', () => {
|
|
|
|
127
|
- return gulp.src('scss/index.css')
|
|
|
|
128
|
- .pipe(sourcemaps.init())
|
|
|
|
129
|
- .pipe(postcss(postcssPlugin(env.dev)))
|
|
|
|
130
|
- .pipe(sourcemaps.write('.'))
|
|
|
|
131
|
- .pipe(gulp.dest('css/'));
|
|
|
|
132
|
-});
|
|
|
|
133
|
-
|
|
|
|
134
|
-// postcss file watch
|
|
|
|
135
|
-gulp.task('postcss-watch', () => {
|
|
|
|
136
|
- gulp.watch('scss/**/*.css', ['postcss-dev']);
|
|
|
|
137
|
-});
|
|
|
|
138
|
-
|
|
|
|
139
|
-// copy assets
|
|
|
|
140
|
-gulp.task('assets', ['img', 'font']);
|
|
|
|
141
|
-
|
|
|
|
142
|
-// copy img
|
|
|
|
143
|
-gulp.task('img', () => {
|
|
|
|
144
|
- return gulp.src('img/**/*')
|
|
|
|
145
|
- .pipe(gulp.dest(dist.img));
|
|
|
|
146
|
-});
|
|
|
|
147
|
-
|
|
|
|
148
|
-//copy font
|
|
|
|
149
|
-gulp.task('font', () => {
|
|
|
|
150
|
- return gulp.src('font/*')
|
|
|
|
151
|
- .pipe(gulp.dest(dist.font));
|
|
|
|
152
|
-});
|
|
|
|
153
|
-
|
|
|
|
154
|
-// postcss compile in pro
|
|
|
|
155
|
-gulp.task('postcss', ['assets'], () => {
|
|
|
|
156
|
- return gulp.src('scss/index.css')
|
|
|
|
157
|
- .pipe(postcss(postcssPlugin(env.pro)))
|
|
|
|
158
|
- .pipe(cssnano())
|
|
|
|
159
|
- .pipe(gulp.dest(dist.css));
|
|
|
|
160
|
-});
|
|
|
|
161
|
-
|
|
|
|
162
|
-// webpack dev server
|
|
|
|
163
|
-gulp.task('webpack-dev-server', () => {
|
|
|
|
164
|
- var devConfig = Object.assign({}, webpackConfig, {
|
|
|
|
165
|
- debug: true
|
|
|
|
166
|
- });
|
|
|
|
167
|
-
|
|
|
|
168
|
- new webpackDevServer(webpack(devConfig), {
|
|
|
|
169
|
- contentBase: '.',
|
|
|
|
170
|
- publicPath: '//localhost:8000/',
|
|
|
|
171
|
- hot: true,
|
|
|
|
172
|
- stats: {
|
|
|
|
173
|
- colors: true
|
|
|
|
174
|
- }
|
|
|
|
175
|
- }).listen(8000, 'localhost', (err) => {
|
|
|
|
176
|
- if (err) {
|
|
|
|
177
|
- throw new gutil.PluginError('webpack-dev-server', err);
|
|
|
|
178
|
- }
|
|
|
|
179
|
- gutil.log('[webpack-serve]', 'http://localhost:8000/');
|
|
|
|
180
|
- });
|
|
|
|
181
|
-});
|
|
|
|
182
|
-
|
|
|
|
183
|
-// webpack compile in pro
|
|
|
|
184
|
-gulp.task('webpack', () => {
|
|
|
|
185
|
- var proConfig = Object.assign({}, webpackConfig);
|
|
|
|
186
|
-
|
|
|
|
187
|
- proConfig.output.path = dist.js;
|
|
|
|
188
|
- webpack(proConfig, (err, stats) => {
|
|
|
|
189
|
- if (err) {
|
|
|
|
190
|
- throw new gutil.PluginError('webpack', err);
|
|
|
|
191
|
- }
|
|
|
|
192
|
- });
|
|
|
|
193
|
-}); |
|
|
|
|
|
1
|
+/**
|
|
|
|
2
|
+ * Yohobuy 构建脚本
|
|
|
|
3
|
+ * @author: xuqi<qi.xu@yoho.cn>
|
|
|
|
4
|
+ * @date: 2016/4/25
|
|
|
|
5
|
+ */
|
|
|
|
6
|
+
|
|
|
|
7
|
+'use strict';
|
|
|
|
8
|
+
|
|
|
|
9
|
+const gulp = require('gulp');
|
|
|
|
10
|
+const gutil = require('gulp-util');
|
|
|
|
11
|
+const ftp = require('gulp-ftp');
|
|
|
|
12
|
+
|
|
|
|
13
|
+const postcss = require('gulp-postcss');
|
|
|
|
14
|
+const sourcemaps = require('gulp-sourcemaps');
|
|
|
|
15
|
+const cssnano = require('gulp-cssnano');
|
|
|
|
16
|
+
|
|
|
|
17
|
+const webpack = require('webpack');
|
|
|
|
18
|
+const webpackDevServer = require('webpack-dev-server');
|
|
|
|
19
|
+const webpackConfig = require('./webpack.config.js');
|
|
|
|
20
|
+
|
|
|
|
21
|
+const env = {
|
|
|
|
22
|
+ dev: Symbol('development'),
|
|
|
|
23
|
+ pro: Symbol('production')
|
|
|
|
24
|
+};
|
|
|
|
25
|
+
|
|
|
|
26
|
+const config = require('../package.json');
|
|
|
|
27
|
+const ftpConfig = {
|
|
|
|
28
|
+ host: '218.94.75.50',
|
|
|
|
29
|
+ user: 'php',
|
|
|
|
30
|
+ pass: 'yoho9646'
|
|
|
|
31
|
+};
|
|
|
|
32
|
+const distRoot = `dist/${config.name}`;
|
|
|
|
33
|
+const dist = {
|
|
|
|
34
|
+ js: `${distRoot}/${config.version}`,
|
|
|
|
35
|
+ css: `${distRoot}/${config.version}`,
|
|
|
|
36
|
+ assets: `${distRoot}/assets`,
|
|
|
|
37
|
+ img: `${distRoot}/assets/img`,
|
|
|
|
38
|
+ font: `${distRoot}/assets/font`
|
|
|
|
39
|
+};
|
|
|
|
40
|
+
|
|
|
|
41
|
+/**
|
|
|
|
42
|
+ * postcss plugins for both dev and pro
|
|
|
|
43
|
+ * @parem et Symbol
|
|
|
|
44
|
+ */
|
|
|
|
45
|
+const postcssPlugin = (et) => {
|
|
|
|
46
|
+ var sprites = {
|
|
|
|
47
|
+ spritesmith: {
|
|
|
|
48
|
+ padding: 2
|
|
|
|
49
|
+ },
|
|
|
|
50
|
+ groupBy(file) {
|
|
|
|
51
|
+ var group = file.url.split('/')[1];
|
|
|
|
52
|
+
|
|
|
|
53
|
+ group = group === '' ? 'yo' : group;
|
|
|
|
54
|
+
|
|
|
|
55
|
+ return group ? Promise.resolve(group) : Promise.reject(group);
|
|
|
|
56
|
+ }
|
|
|
|
57
|
+ },
|
|
|
|
58
|
+ assets,
|
|
|
|
59
|
+ plugins;
|
|
|
|
60
|
+
|
|
|
|
61
|
+ // assets & sprites config in both dev and pro
|
|
|
|
62
|
+ if (et === env.pro) {
|
|
|
|
63
|
+ assets = {
|
|
|
|
64
|
+ loadPaths: [dist.img, dist.font]
|
|
|
|
65
|
+ };
|
|
|
|
66
|
+
|
|
|
|
67
|
+ Object.assign(sprites, {
|
|
|
|
68
|
+ basePath: dist.img,
|
|
|
|
69
|
+ stylesheetPath: dist.css,
|
|
|
|
70
|
+ spritePath: dist.img
|
|
|
|
71
|
+ });
|
|
|
|
72
|
+ } else if (et === env.dev) {
|
|
|
|
73
|
+ assets = {
|
|
|
|
74
|
+ loadPaths: ['img/', 'font/'],
|
|
|
|
75
|
+ relativeTo: 'css/'
|
|
|
|
76
|
+ };
|
|
|
|
77
|
+
|
|
|
|
78
|
+ Object.assign(sprites, {
|
|
|
|
79
|
+ basePath: 'img/',
|
|
|
|
80
|
+ stylesheetPath: 'css/',
|
|
|
|
81
|
+ spritePath: 'img/'
|
|
|
|
82
|
+ });
|
|
|
|
83
|
+ }
|
|
|
|
84
|
+
|
|
|
|
85
|
+ plugins = [
|
|
|
|
86
|
+ require('autoprefixer')({
|
|
|
|
87
|
+ browsers: ['> 1%']
|
|
|
|
88
|
+ }),
|
|
|
|
89
|
+ require('precss'),
|
|
|
|
90
|
+ require('postcss-sprites').default(sprites),
|
|
|
|
91
|
+ require('postcss-assets')(assets),
|
|
|
|
92
|
+ require('postcss-calc'),
|
|
|
|
93
|
+ require('postcss-opacity'),
|
|
|
|
94
|
+
|
|
|
|
95
|
+ // 可选
|
|
|
|
96
|
+ require('postcss-use')({
|
|
|
|
97
|
+ modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
|
|
|
|
98
|
+ })
|
|
|
|
99
|
+ ];
|
|
|
|
100
|
+
|
|
|
|
101
|
+ if (et === env.pro) {
|
|
|
|
102
|
+ plugins.push(require('postcss-cachebuster')({
|
|
|
|
103
|
+ imagesPath: `/${dist.img}`,
|
|
|
|
104
|
+ cssPath: `/${dist.css}`
|
|
|
|
105
|
+ }));
|
|
|
|
106
|
+ }
|
|
|
|
107
|
+ return plugins;
|
|
|
|
108
|
+};
|
|
|
|
109
|
+
|
|
|
|
110
|
+// default
|
|
|
|
111
|
+gulp.task('default', ['postcss-dev', 'postcss-watch', 'webpack-dev-server']);
|
|
|
|
112
|
+
|
|
|
|
113
|
+// ge
|
|
|
|
114
|
+gulp.task('ge', ['postcss', 'webpack']);
|
|
|
|
115
|
+
|
|
|
|
116
|
+// dist
|
|
|
|
117
|
+gulp.task('dist', ['ge'], () => {
|
|
|
|
118
|
+ var ftpstream = ftp(ftpConfig);
|
|
|
|
119
|
+
|
|
|
|
120
|
+ return gulp.src('dist/**/')
|
|
|
|
121
|
+ .pipe(ftpstream)
|
|
|
|
122
|
+ .pipe(gutil.noop());
|
|
|
|
123
|
+});
|
|
|
|
124
|
+
|
|
|
|
125
|
+// postcss compile in dev
|
|
|
|
126
|
+gulp.task('postcss-dev', () => {
|
|
|
|
127
|
+ return gulp.src('scss/index.css')
|
|
|
|
128
|
+ .pipe(sourcemaps.init())
|
|
|
|
129
|
+ .pipe(postcss(postcssPlugin(env.dev)))
|
|
|
|
130
|
+ .pipe(sourcemaps.write('.'))
|
|
|
|
131
|
+ .pipe(gulp.dest('css/'));
|
|
|
|
132
|
+});
|
|
|
|
133
|
+
|
|
|
|
134
|
+// postcss file watch
|
|
|
|
135
|
+gulp.task('postcss-watch', () => {
|
|
|
|
136
|
+ gulp.watch('scss/**/*.css', ['postcss-dev']);
|
|
|
|
137
|
+});
|
|
|
|
138
|
+
|
|
|
|
139
|
+// copy assets
|
|
|
|
140
|
+gulp.task('assets', ['img', 'font']);
|
|
|
|
141
|
+
|
|
|
|
142
|
+// copy img
|
|
|
|
143
|
+gulp.task('img', () => {
|
|
|
|
144
|
+ return gulp.src('img/**/*')
|
|
|
|
145
|
+ .pipe(gulp.dest(dist.img));
|
|
|
|
146
|
+});
|
|
|
|
147
|
+
|
|
|
|
148
|
+// copy font
|
|
|
|
149
|
+gulp.task('font', () => {
|
|
|
|
150
|
+ return gulp.src('font/*')
|
|
|
|
151
|
+ .pipe(gulp.dest(dist.font));
|
|
|
|
152
|
+});
|
|
|
|
153
|
+
|
|
|
|
154
|
+// postcss compile in pro
|
|
|
|
155
|
+gulp.task('postcss', ['assets'], () => {
|
|
|
|
156
|
+ return gulp.src('scss/index.css')
|
|
|
|
157
|
+ .pipe(postcss(postcssPlugin(env.pro)))
|
|
|
|
158
|
+ .pipe(cssnano())
|
|
|
|
159
|
+ .pipe(gulp.dest(dist.css));
|
|
|
|
160
|
+});
|
|
|
|
161
|
+
|
|
|
|
162
|
+// webpack dev server
|
|
|
|
163
|
+gulp.task('webpack-dev-server', () => {
|
|
|
|
164
|
+ var devConfig = Object.assign({}, webpackConfig, {
|
|
|
|
165
|
+ debug: true
|
|
|
|
166
|
+ });
|
|
|
|
167
|
+
|
|
|
|
168
|
+ new webpackDevServer(webpack(devConfig), {
|
|
|
|
169
|
+ contentBase: '.',
|
|
|
|
170
|
+ publicPath: '//localhost:8000/',
|
|
|
|
171
|
+ hot: true,
|
|
|
|
172
|
+ stats: {
|
|
|
|
173
|
+ colors: true
|
|
|
|
174
|
+ }
|
|
|
|
175
|
+ }).listen(8000, 'localhost', (err) => {
|
|
|
|
176
|
+ if (err) {
|
|
|
|
177
|
+ throw new gutil.PluginError('webpack-dev-server', err);
|
|
|
|
178
|
+ }
|
|
|
|
179
|
+ gutil.log('[webpack-serve]', 'http://localhost:8000/');
|
|
|
|
180
|
+ });
|
|
|
|
181
|
+});
|
|
|
|
182
|
+
|
|
|
|
183
|
+// webpack compile in pro
|
|
|
|
184
|
+gulp.task('webpack', () => {
|
|
|
|
185
|
+ var proConfig = Object.assign({}, webpackConfig);
|
|
|
|
186
|
+
|
|
|
|
187
|
+ proConfig.output.path = dist.js;
|
|
|
|
188
|
+ webpack(proConfig, (err, stats) => {
|
|
|
|
189
|
+ if (err) {
|
|
|
|
190
|
+ throw new gutil.PluginError('webpack', err);
|
|
|
|
191
|
+ }
|
|
|
|
192
|
+ });
|
|
|
|
193
|
+}); |
