Merge branch 'develop/wap' of http://git.dev.yoho.cn/web/yohobuy into develop/wap
Showing
100 changed files
with
518 additions
and
308 deletions
Too many changes to show.
To preserve performance only 100 of 100+ files are displayed.
static/gulpfile-new.js
0 → 100644
1 | +/** | ||
2 | + * GULP-FILE | ||
3 | + * author: xuqi(qi.xu@yoho.cn) | ||
4 | + * date: 2015/9/30 | ||
5 | + * 根据 PC 版修改为 H5 版, 毕凯 | ||
6 | + */ | ||
7 | + | ||
8 | +var gulp = require('gulp'), | ||
9 | + cp = require('child_process'); | ||
10 | + | ||
11 | +var fs = require('fs'), | ||
12 | + ftp = require('gulp-ftp'), | ||
13 | + gutil = require('gulp-util'), | ||
14 | + uglify = require('gulp-uglify'), | ||
15 | + Package = require('father').SpmPackage, | ||
16 | + transport = require('gulp-spm'), | ||
17 | + concat = require('gulp-concat'); | ||
18 | + | ||
19 | +var postcss = require('gulp-postcss'); | ||
20 | +var sourcemaps = require('gulp-sourcemaps'); | ||
21 | +var cssnano = require('gulp-cssnano'); | ||
22 | + | ||
23 | +var config = require('./package'); | ||
24 | + | ||
25 | +var rootDist = 'dist/myohobuy/', | ||
26 | + ftpConfig = { | ||
27 | + host: '218.94.75.58', | ||
28 | + user: 'php', | ||
29 | + pass: 'yoho9646' | ||
30 | + }; | ||
31 | + | ||
32 | +var distDir = { | ||
33 | + js: rootDist + config.version, | ||
34 | + css: rootDist + config.version, | ||
35 | + img: rootDist + 'assets/img', | ||
36 | + font: rootDist + 'assets/font' | ||
37 | +}; | ||
38 | + | ||
39 | +gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']); | ||
40 | + | ||
41 | + | ||
42 | +//根据环境变量生成postcss插件配置 | ||
43 | +function postcssEnvPlugin(env) { | ||
44 | + var sprites = { | ||
45 | + spritesmith: { | ||
46 | + padding: 10 | ||
47 | + }, | ||
48 | + groupBy: function(file) { | ||
49 | + | ||
50 | + // 根据目录分组,防止合并后的图片太大 | ||
51 | + var group = file.url.split('/')[1]; | ||
52 | + | ||
53 | + file.retina = true; // H5 强制所有图片都是用二倍图 | ||
54 | + return group ? Promise.resolve(group) : Promise.reject(); | ||
55 | + }, | ||
56 | + filterBy: function(file) { | ||
57 | + | ||
58 | + //使用resolve转化后静态资源生成../img或者../assets/img/的路径 | ||
59 | + if (/\/img/.test(file.url) || /data:image/.test(file.url)) { | ||
60 | + return Promise.reject(); | ||
61 | + } | ||
62 | + return Promise.resolve(); | ||
63 | + } | ||
64 | + }, | ||
65 | + assets; | ||
66 | + | ||
67 | + if (env === 'DEV') { | ||
68 | + assets = { | ||
69 | + loadPaths: ['font/', 'img/'], | ||
70 | + relativeTo: 'css/' | ||
71 | + }; | ||
72 | + | ||
73 | + Object.assign(sprites, { | ||
74 | + basePath: './img', | ||
75 | + stylesheetPath: './css', | ||
76 | + spritePath: './img' | ||
77 | + }); | ||
78 | + } else if (env === 'PRO') { | ||
79 | + assets = { | ||
80 | + loadPaths: [distDir.img, distDir.font], | ||
81 | + relativeTo: distDir.css, | ||
82 | + cachebuster: function(filePath, urlPathname) { | ||
83 | + | ||
84 | + //只给字体加no-cache | ||
85 | + if (/font\//.test(urlPathname)) { | ||
86 | + return fs.statSync(filePath).mtime.getTime().toString(16); | ||
87 | + } | ||
88 | + } | ||
89 | + }; | ||
90 | + | ||
91 | + Object.assign(sprites, { | ||
92 | + basePath: distDir.img, | ||
93 | + stylesheetPath: distDir.css, | ||
94 | + spritePath: distDir.img | ||
95 | + }); | ||
96 | + } | ||
97 | + | ||
98 | + return [ | ||
99 | + require('precss'), | ||
100 | + require('postcss-assets')(assets), | ||
101 | + require('postcss-sprites').default(sprites), | ||
102 | + require('postcss-calc'), | ||
103 | + require('postcss-pxtorem')({ | ||
104 | + rootValue: 40, | ||
105 | + unitPrecision: 5, // 保留5位小数字 | ||
106 | + minPixelValue: 2, // 小于 2px 时,不转换, 单位为 PX 大写的时候不转换 | ||
107 | + selectorBlackList: [], // 选择器黑名单,可以使用正则 | ||
108 | + propWhiteList: [] // 属性名称为空,表示替换所有属性的值 | ||
109 | + }), | ||
110 | + require('autoprefixer')({ | ||
111 | + browsers: ['> 1%'] | ||
112 | + }), | ||
113 | + | ||
114 | + //可选 | ||
115 | + require('postcss-use')({ | ||
116 | + modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position'] | ||
117 | + }) | ||
118 | + ]; | ||
119 | +} | ||
120 | + | ||
121 | +//Postcss开发环境 | ||
122 | +gulp.task('postcss-dev', function() { | ||
123 | + return gulp.src('sass/index.css') | ||
124 | + .pipe(sourcemaps.init()) | ||
125 | + .pipe(postcss(postcssEnvPlugin('DEV'))) | ||
126 | + .pipe(sourcemaps.write('.')) | ||
127 | + .pipe(gulp.dest('css/')) | ||
128 | +}); | ||
129 | + | ||
130 | +gulp.task('postcss-watch', function() { | ||
131 | + gulp.watch('sass/**/*.css', ['postcss-dev']); | ||
132 | +}); | ||
133 | + | ||
134 | +//Postcss正式环境生成 | ||
135 | +gulp.task('postcss-pro', ['assets'], function() { | ||
136 | + return gulp.src('sass/index.css') | ||
137 | + .pipe(postcss(postcssEnvPlugin('PRO'))) | ||
138 | + .pipe(cssnano()) | ||
139 | + .pipe(gulp.dest(distDir.css)) | ||
140 | +}); | ||
141 | + | ||
142 | +// start spm server | ||
143 | +gulp.task('spm-doc', function() { | ||
144 | + var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001,H5 用8000, 跑两个服务器,不冲突 | ||
145 | + | ||
146 | + // sd.stdout.on('data', function(data) { | ||
147 | + // console.log(data); | ||
148 | + // }); | ||
149 | + | ||
150 | + sd.stderr.on('data', function(data) { | ||
151 | + console.log(data); | ||
152 | + }); | ||
153 | + | ||
154 | + sd.on('exit', function(code) { | ||
155 | + console.log('process spm doc exit with code ' + code); | ||
156 | + }); | ||
157 | +}); | ||
158 | + | ||
159 | +//生成发布目录,可用于上传测试机 | ||
160 | +gulp.task('ge', ['assets', 'postcss-pro', 'build']); | ||
161 | + | ||
162 | +//发布 | ||
163 | +gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() { | ||
164 | + var ftpstream = ftp(ftpConfig); | ||
165 | + | ||
166 | + return gulp.src('dist/**/') | ||
167 | + .pipe(ftpstream) | ||
168 | + .pipe(gutil.noop()); | ||
169 | +}); | ||
170 | + | ||
171 | +//font+img->dist/assets | ||
172 | +gulp.task('assets', ['img', 'font']); | ||
173 | + | ||
174 | +gulp.task('img', function() { | ||
175 | + return gulp.src('img/**/*') | ||
176 | + .pipe(gulp.dest(distDir.img)); | ||
177 | +}); | ||
178 | + | ||
179 | +gulp.task('font', function() { | ||
180 | + return gulp.src('font/*') | ||
181 | + .pipe(gulp.dest(distDir.font)) | ||
182 | +}); | ||
183 | + | ||
184 | +//spm build | ||
185 | +gulp.task('build', ['libs', 'business']); | ||
186 | + | ||
187 | +//libs | ||
188 | +gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']); | ||
189 | + | ||
190 | +gulp.task('pre-libs', function() { | ||
191 | + var obj = { | ||
192 | + name: '', | ||
193 | + version: config.version, | ||
194 | + spm: config.spm | ||
195 | + }; | ||
196 | + var packages = [], | ||
197 | + libsjs = ''; | ||
198 | + | ||
199 | + var libCon, key, i; | ||
200 | + | ||
201 | + var pkg; | ||
202 | + | ||
203 | + obj.spm.main = 'libs.js'; | ||
204 | + obj.spm.buildArgs = '--idleading {{}} --include all'; | ||
205 | + | ||
206 | + libCon = JSON.stringify(obj); | ||
207 | + | ||
208 | + fs.renameSync('package.json', 'package.bak.json'); | ||
209 | + fs.writeFileSync('package.json', libCon); | ||
210 | + | ||
211 | + for (key in obj.spm.dependencies) { | ||
212 | + if (obj.spm.inside && obj.spm.inside[key]) { | ||
213 | + packages.push(obj.spm.inside[key]); | ||
214 | + } else { | ||
215 | + packages.push(key); | ||
216 | + } | ||
217 | + } | ||
218 | + | ||
219 | + for (i = 0; i < packages.length; i++) { | ||
220 | + libsjs += 'require("' + packages[i] + '");'; | ||
221 | + } | ||
222 | + | ||
223 | + fs.writeFileSync('libs.js', libsjs); //重写入口文件 | ||
224 | + | ||
225 | + pkg = new Package(__dirname); | ||
226 | + | ||
227 | + return gulp.src(pkg.main) | ||
228 | + .pipe(transport({ | ||
229 | + pkg: pkg | ||
230 | + })) | ||
231 | + .pipe(gulp.dest(distDir.js)); | ||
232 | +}); | ||
233 | + | ||
234 | +gulp.task('concat-min-libs', ['pre-libs'], function() { | ||
235 | + var path = distDir.js + '/libs.js'; | ||
236 | + var jsStr = fs.readFileSync(path).toString(); | ||
237 | + | ||
238 | + fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4)); | ||
239 | + | ||
240 | + return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js']) | ||
241 | + .pipe(concat('lib.js')) | ||
242 | + .pipe(uglify()) | ||
243 | + .pipe(gulp.dest(distDir.js)); | ||
244 | +}); | ||
245 | + | ||
246 | +gulp.task('clear-libs', ['concat-min-libs'], function() { | ||
247 | + fs.renameSync('package.bak.json', 'package.json'); | ||
248 | + fs.unlinkSync('./libs.js'); | ||
249 | + fs.unlinkSync(distDir.js + '/libs.js'); | ||
250 | +}); | ||
251 | + | ||
252 | +gulp.task('business', ['libs'], function() { | ||
253 | + var pkg = new Package(__dirname); | ||
254 | + | ||
255 | + return gulp.src(pkg.main) | ||
256 | + .pipe(transport({ | ||
257 | + pkg: pkg | ||
258 | + })) | ||
259 | + .pipe(concat('index-debug.js')) | ||
260 | + .pipe(gulp.dest(distDir.js)) | ||
261 | + .pipe(uglify()) | ||
262 | + .pipe(concat('index.js')) | ||
263 | + .pipe(gulp.dest(distDir.js)); | ||
264 | +}); |
static/gulpfile-old.js
deleted
100644 → 0
1 | -/** | ||
2 | - * GULP-FILE | ||
3 | - * author: xuqi(qi.xu@yoho.cn) | ||
4 | - * date: 2015/9/30 | ||
5 | - */ | ||
6 | - | ||
7 | -var gulp = require('gulp'), | ||
8 | - compass = require('gulp-compass'), | ||
9 | - cp = require('child_process'); | ||
10 | - | ||
11 | -var fs = require('fs'), | ||
12 | - ftp = require('gulp-ftp'), | ||
13 | - gutil = require('gulp-util'), | ||
14 | - uglify = require('gulp-uglify'), | ||
15 | - Package = require('father').SpmPackage, | ||
16 | - transport = require('gulp-spm'), | ||
17 | - concat = require('gulp-concat'); | ||
18 | - | ||
19 | -var config = JSON.parse(fs.readFileSync('./package.json').toString()); | ||
20 | - | ||
21 | -var rootDist = 'dist/myohobuy/', | ||
22 | - ftpConfig = { | ||
23 | - host: '218.94.75.58', | ||
24 | - user: 'php', | ||
25 | - pass: 'yoho9646' | ||
26 | - }; | ||
27 | - | ||
28 | -var distDir = { | ||
29 | - js: rootDist + config.version, | ||
30 | - css: rootDist + config.version, | ||
31 | - img: rootDist + 'assets/img', | ||
32 | - font: rootDist + 'assets/font' | ||
33 | -}; | ||
34 | - | ||
35 | -gulp.task('default', ['compass', 'compass-watch', 'spm-doc']); | ||
36 | - | ||
37 | -// compass | ||
38 | -gulp.task('compass', function() { | ||
39 | - gulp.src('sass/**/*.scss') | ||
40 | - .pipe( | ||
41 | - compass({ | ||
42 | - config_file: 'config.rb', | ||
43 | - css: 'css', | ||
44 | - sass: 'sass' | ||
45 | - }) | ||
46 | - ).on('error', function(error) { | ||
47 | - console.log(error); | ||
48 | - this.emit('end'); | ||
49 | - }); | ||
50 | -}); | ||
51 | - | ||
52 | -// compass watch | ||
53 | -gulp.task('compass-watch', function() { | ||
54 | - gulp.watch('sass/**/*.scss', ['compass']); | ||
55 | -}); | ||
56 | - | ||
57 | -// start spm server | ||
58 | -gulp.task('spm-doc', function() { | ||
59 | - var sd = cp.exec('spm doc'); | ||
60 | - | ||
61 | - // sd.stdout.on('data', function(data) { | ||
62 | - // console.log(data); | ||
63 | - // }); | ||
64 | - | ||
65 | - sd.stderr.on('data', function(data) { | ||
66 | - console.log(data); | ||
67 | - }); | ||
68 | - | ||
69 | - sd.on('exit', function(code) { | ||
70 | - console.log('process spm doc exit with code ' + code); | ||
71 | - }); | ||
72 | -}); | ||
73 | - | ||
74 | -//生成发布目录,可用于上传测试机 | ||
75 | -gulp.task('ge', ['assets', 'compass-production', 'build']); | ||
76 | - | ||
77 | -//发布 | ||
78 | -gulp.task('dist', ['assets', 'compass-production', 'build'], function() { | ||
79 | - var ftpstream = ftp(ftpConfig); | ||
80 | - | ||
81 | - return gulp.src('dist/**/') | ||
82 | - .pipe(ftpstream) | ||
83 | - .pipe(gutil.noop()); | ||
84 | -}); | ||
85 | - | ||
86 | -//font+img->dist/assets | ||
87 | -gulp.task('assets', function() { | ||
88 | - gulp.src('img/**') | ||
89 | - .pipe(gulp.dest(distDir.img)); | ||
90 | - gulp.src('font/*') | ||
91 | - .pipe(gulp.dest(distDir.font)); | ||
92 | -}); | ||
93 | - | ||
94 | -//compass | ||
95 | -gulp.task('compass-production', ['assets'], function() { | ||
96 | - gulp.src('sass/index.scss') | ||
97 | - .pipe( | ||
98 | - compass({ | ||
99 | - css: distDir.css, | ||
100 | - sass: 'sass', | ||
101 | - image: distDir.img, | ||
102 | - font: distDir.font, | ||
103 | - http_path: '/', | ||
104 | - style: 'compressed' | ||
105 | - }) | ||
106 | - ) | ||
107 | - .on('error', function(error) { | ||
108 | - console.log(error); | ||
109 | - this.emit('end'); | ||
110 | - }); | ||
111 | -}); | ||
112 | - | ||
113 | -//spm build | ||
114 | -gulp.task('build', ['libs', 'business']); | ||
115 | - | ||
116 | -//libs | ||
117 | -gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']); | ||
118 | - | ||
119 | -gulp.task('pre-libs', function() { | ||
120 | - var obj = { | ||
121 | - name: '', | ||
122 | - version: config.version, | ||
123 | - spm: config.spm | ||
124 | - }; | ||
125 | - var packages = [], | ||
126 | - libsjs = ''; | ||
127 | - | ||
128 | - var libCon, key, i; | ||
129 | - | ||
130 | - var pkg; | ||
131 | - | ||
132 | - obj.spm.main = 'libs.js'; | ||
133 | - obj.spm.buildArgs = '--idleading {{}} --include all'; | ||
134 | - | ||
135 | - libCon = JSON.stringify(obj); | ||
136 | - | ||
137 | - fs.renameSync('package.json', 'package.bak.json'); | ||
138 | - fs.writeFileSync('package.json', libCon); | ||
139 | - | ||
140 | - for (key in obj.spm.dependencies) { | ||
141 | - if (obj.spm.inside && obj.spm.inside[key]) { | ||
142 | - packages.push(obj.spm.inside[key]); | ||
143 | - } else { | ||
144 | - packages.push(key); | ||
145 | - } | ||
146 | - } | ||
147 | - | ||
148 | - for (i = 0; i < packages.length; i++) { | ||
149 | - libsjs += 'require("' + packages[i] + '");'; | ||
150 | - } | ||
151 | - | ||
152 | - fs.writeFileSync('libs.js', libsjs); //重写入口文件 | ||
153 | - | ||
154 | - pkg = new Package(__dirname); | ||
155 | - | ||
156 | - return gulp.src(pkg.main) | ||
157 | - .pipe(transport({ | ||
158 | - pkg: pkg | ||
159 | - })) | ||
160 | - .pipe(gulp.dest(distDir.js)); | ||
161 | -}); | ||
162 | - | ||
163 | -gulp.task('concat-min-libs', ['pre-libs'], function() { | ||
164 | - var path = distDir.js + '/libs.js'; | ||
165 | - var jsStr = fs.readFileSync(path).toString(); | ||
166 | - | ||
167 | - fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4)); | ||
168 | - | ||
169 | - return gulp.src(['js/sea.js', distDir.js + '/libs.js']) | ||
170 | - .pipe(concat('lib.js')) | ||
171 | - .pipe(uglify()) | ||
172 | - .pipe(gulp.dest(distDir.js)); | ||
173 | -}); | ||
174 | - | ||
175 | -gulp.task('clear-libs', ['concat-min-libs'], function() { | ||
176 | - fs.renameSync('package.bak.json', 'package.json'); | ||
177 | - fs.unlinkSync('./libs.js'); | ||
178 | - fs.unlinkSync(distDir.js + '/libs.js'); | ||
179 | -}); | ||
180 | - | ||
181 | -gulp.task('business', ['libs'], function() { | ||
182 | - var pkg = new Package(__dirname); | ||
183 | - | ||
184 | - return gulp.src(pkg.main) | ||
185 | - .pipe(transport({ | ||
186 | - pkg: pkg | ||
187 | - })) | ||
188 | - .pipe(concat('index-debug.js')) | ||
189 | - .pipe(gulp.dest(distDir.js)) | ||
190 | - .pipe(uglify()) | ||
191 | - .pipe(concat('index.js')) | ||
192 | - .pipe(gulp.dest(distDir.js)); | ||
193 | -}); |
@@ -2,10 +2,10 @@ | @@ -2,10 +2,10 @@ | ||
2 | * GULP-FILE | 2 | * GULP-FILE |
3 | * author: xuqi(qi.xu@yoho.cn) | 3 | * author: xuqi(qi.xu@yoho.cn) |
4 | * date: 2015/9/30 | 4 | * date: 2015/9/30 |
5 | - * 根据 PC 版修改为 H5 版, 毕凯 | ||
6 | */ | 5 | */ |
7 | 6 | ||
8 | var gulp = require('gulp'), | 7 | var gulp = require('gulp'), |
8 | + compass = require('gulp-compass'), | ||
9 | cp = require('child_process'); | 9 | cp = require('child_process'); |
10 | 10 | ||
11 | var fs = require('fs'), | 11 | var fs = require('fs'), |
@@ -16,11 +16,7 @@ var fs = require('fs'), | @@ -16,11 +16,7 @@ var fs = require('fs'), | ||
16 | transport = require('gulp-spm'), | 16 | transport = require('gulp-spm'), |
17 | concat = require('gulp-concat'); | 17 | concat = require('gulp-concat'); |
18 | 18 | ||
19 | -var postcss = require('gulp-postcss'); | ||
20 | -var sourcemaps = require('gulp-sourcemaps'); | ||
21 | -var cssnano = require('gulp-cssnano'); | ||
22 | - | ||
23 | -var config = require('./package'); | 19 | +var config = JSON.parse(fs.readFileSync('./package.json').toString()); |
24 | 20 | ||
25 | var rootDist = 'dist/myohobuy/', | 21 | var rootDist = 'dist/myohobuy/', |
26 | ftpConfig = { | 22 | ftpConfig = { |
@@ -36,112 +32,31 @@ var distDir = { | @@ -36,112 +32,31 @@ var distDir = { | ||
36 | font: rootDist + 'assets/font' | 32 | font: rootDist + 'assets/font' |
37 | }; | 33 | }; |
38 | 34 | ||
39 | -gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']); | ||
40 | - | ||
41 | - | ||
42 | -//根据环境变量生成postcss插件配置 | ||
43 | -function postcssEnvPlugin(env) { | ||
44 | - var sprites = { | ||
45 | - spritesmith: { | ||
46 | - padding: 10 | ||
47 | - }, | ||
48 | - groupBy: function(file) { | ||
49 | - | ||
50 | - // 根据目录分组,防止合并后的图片太大 | ||
51 | - var group = file.url.split('/')[1]; | ||
52 | - | ||
53 | - file.retina = true; // H5 强制所有图片都是用二倍图 | ||
54 | - return group ? Promise.resolve(group) : Promise.reject(); | ||
55 | - }, | ||
56 | - filterBy: function(file) { | ||
57 | - | ||
58 | - //使用resolve转化后静态资源生成../img或者../assets/img/的路径 | ||
59 | - if (/\/img/.test(file.url) || /data:image/.test(file.url)) { | ||
60 | - return Promise.reject(); | ||
61 | - } | ||
62 | - return Promise.resolve(); | ||
63 | - } | ||
64 | - }, | ||
65 | - assets; | ||
66 | - | ||
67 | - if (env === 'DEV') { | ||
68 | - assets = { | ||
69 | - loadPaths: ['font/', 'img/'], | ||
70 | - relativeTo: 'css/' | ||
71 | - }; | ||
72 | - | ||
73 | - Object.assign(sprites, { | ||
74 | - basePath: './img', | ||
75 | - stylesheetPath: './css', | ||
76 | - spritePath: './img' | ||
77 | - }); | ||
78 | - } else if (env === 'PRO') { | ||
79 | - assets = { | ||
80 | - loadPaths: [distDir.img, distDir.font], | ||
81 | - relativeTo: distDir.css, | ||
82 | - cachebuster: function(filePath, urlPathname) { | ||
83 | - | ||
84 | - //只给字体加no-cache | ||
85 | - if (/font\//.test(urlPathname)) { | ||
86 | - return fs.statSync(filePath).mtime.getTime().toString(16); | ||
87 | - } | ||
88 | - } | ||
89 | - }; | ||
90 | - | ||
91 | - Object.assign(sprites, { | ||
92 | - basePath: distDir.img, | ||
93 | - stylesheetPath: distDir.css, | ||
94 | - spritePath: distDir.img | ||
95 | - }); | ||
96 | - } | 35 | +gulp.task('default', ['compass', 'compass-watch', 'spm-doc']); |
97 | 36 | ||
98 | - return [ | ||
99 | - require('precss'), | ||
100 | - require('postcss-assets')(assets), | ||
101 | - require('postcss-sprites').default(sprites), | ||
102 | - require('postcss-calc'), | ||
103 | - require('postcss-pxtorem')({ | ||
104 | - rootValue: 40, | ||
105 | - unitPrecision: 5, // 保留5位小数字 | ||
106 | - minPixelValue: 2, // 小于 2px 时,不转换, 单位为 PX 大写的时候不转换 | ||
107 | - selectorBlackList: [], // 选择器黑名单,可以使用正则 | ||
108 | - propWhiteList: [] // 属性名称为空,表示替换所有属性的值 | ||
109 | - }), | ||
110 | - require('autoprefixer')({ | ||
111 | - browsers: ['> 1%'] | ||
112 | - }), | ||
113 | - | ||
114 | - //可选 | ||
115 | - require('postcss-use')({ | ||
116 | - modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position'] | 37 | +// compass |
38 | +gulp.task('compass', function() { | ||
39 | + gulp.src('sass/**/*.scss') | ||
40 | + .pipe( | ||
41 | + compass({ | ||
42 | + config_file: 'config.rb', | ||
43 | + css: 'css', | ||
44 | + sass: 'sass' | ||
117 | }) | 45 | }) |
118 | - ]; | ||
119 | -} | ||
120 | - | ||
121 | -//Postcss开发环境 | ||
122 | -gulp.task('postcss-dev', function() { | ||
123 | - return gulp.src('sass/index.css') | ||
124 | - .pipe(sourcemaps.init()) | ||
125 | - .pipe(postcss(postcssEnvPlugin('DEV'))) | ||
126 | - .pipe(sourcemaps.write('.')) | ||
127 | - .pipe(gulp.dest('css/')) | ||
128 | -}); | ||
129 | - | ||
130 | -gulp.task('postcss-watch', function() { | ||
131 | - gulp.watch('sass/**/*.css', ['postcss-dev']); | 46 | + ).on('error', function(error) { |
47 | + console.log(error); | ||
48 | + this.emit('end'); | ||
49 | + }); | ||
132 | }); | 50 | }); |
133 | 51 | ||
134 | -//Postcss正式环境生成 | ||
135 | -gulp.task('postcss-pro', ['assets'], function() { | ||
136 | - return gulp.src('sass/index.css') | ||
137 | - .pipe(postcss(postcssEnvPlugin('PRO'))) | ||
138 | - .pipe(cssnano()) | ||
139 | - .pipe(gulp.dest(distDir.css)) | 52 | +// compass watch |
53 | +gulp.task('compass-watch', function() { | ||
54 | + gulp.watch('sass/**/*.scss', ['compass']); | ||
140 | }); | 55 | }); |
141 | 56 | ||
142 | // start spm server | 57 | // start spm server |
143 | gulp.task('spm-doc', function() { | 58 | gulp.task('spm-doc', function() { |
144 | - var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001,H5 用8000, 跑两个服务器,不冲突 | 59 | + var sd = cp.exec('spm doc'); |
145 | 60 | ||
146 | // sd.stdout.on('data', function(data) { | 61 | // sd.stdout.on('data', function(data) { |
147 | // console.log(data); | 62 | // console.log(data); |
@@ -157,10 +72,10 @@ gulp.task('spm-doc', function() { | @@ -157,10 +72,10 @@ gulp.task('spm-doc', function() { | ||
157 | }); | 72 | }); |
158 | 73 | ||
159 | //生成发布目录,可用于上传测试机 | 74 | //生成发布目录,可用于上传测试机 |
160 | -gulp.task('ge', ['assets', 'postcss-pro', 'build']); | 75 | +gulp.task('ge', ['assets', 'compass-production', 'build']); |
161 | 76 | ||
162 | //发布 | 77 | //发布 |
163 | -gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() { | 78 | +gulp.task('dist', ['assets', 'compass-production', 'build'], function() { |
164 | var ftpstream = ftp(ftpConfig); | 79 | var ftpstream = ftp(ftpConfig); |
165 | 80 | ||
166 | return gulp.src('dist/**/') | 81 | return gulp.src('dist/**/') |
@@ -169,16 +84,30 @@ gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() { | @@ -169,16 +84,30 @@ gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() { | ||
169 | }); | 84 | }); |
170 | 85 | ||
171 | //font+img->dist/assets | 86 | //font+img->dist/assets |
172 | -gulp.task('assets', ['img', 'font']); | ||
173 | - | ||
174 | -gulp.task('img', function() { | ||
175 | - return gulp.src('img/**/*') | 87 | +gulp.task('assets', function() { |
88 | + gulp.src('img/**') | ||
176 | .pipe(gulp.dest(distDir.img)); | 89 | .pipe(gulp.dest(distDir.img)); |
90 | + gulp.src('font/*') | ||
91 | + .pipe(gulp.dest(distDir.font)); | ||
177 | }); | 92 | }); |
178 | 93 | ||
179 | -gulp.task('font', function() { | ||
180 | - return gulp.src('font/*') | ||
181 | - .pipe(gulp.dest(distDir.font)) | 94 | +//compass |
95 | +gulp.task('compass-production', ['assets'], function() { | ||
96 | + gulp.src('sass/index.scss') | ||
97 | + .pipe( | ||
98 | + compass({ | ||
99 | + css: distDir.css, | ||
100 | + sass: 'sass', | ||
101 | + image: distDir.img, | ||
102 | + font: distDir.font, | ||
103 | + http_path: '/', | ||
104 | + style: 'compressed' | ||
105 | + }) | ||
106 | + ) | ||
107 | + .on('error', function(error) { | ||
108 | + console.log(error); | ||
109 | + this.emit('end'); | ||
110 | + }); | ||
182 | }); | 111 | }); |
183 | 112 | ||
184 | //spm build | 113 | //spm build |
@@ -237,7 +166,7 @@ gulp.task('concat-min-libs', ['pre-libs'], function() { | @@ -237,7 +166,7 @@ gulp.task('concat-min-libs', ['pre-libs'], function() { | ||
237 | 166 | ||
238 | fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4)); | 167 | fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4)); |
239 | 168 | ||
240 | - return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js']) | 169 | + return gulp.src(['js/sea.js', distDir.js + '/libs.js']) |
241 | .pipe(concat('lib.js')) | 170 | .pipe(concat('lib.js')) |
242 | .pipe(uglify()) | 171 | .pipe(uglify()) |
243 | .pipe(gulp.dest(distDir.js)); | 172 | .pipe(gulp.dest(distDir.js)); |
static/img/trend.png
0 → 100644

3.36 KB
@@ -6,6 +6,7 @@ | @@ -6,6 +6,7 @@ | ||
6 | var $ = require('jquery'), | 6 | var $ = require('jquery'), |
7 | Swiper = require('yoho.iswiper'), | 7 | Swiper = require('yoho.iswiper'), |
8 | lazyLoad = require('yoho.lazyload'), | 8 | lazyLoad = require('yoho.lazyload'), |
9 | + noticeScroll = require('../plugin/notice-scroll'), | ||
9 | $mobileWrap = $('.mobile-wrap'), | 10 | $mobileWrap = $('.mobile-wrap'), |
10 | $overlay = $('.overlay'), | 11 | $overlay = $('.overlay'), |
11 | $sideNav = $('.side-nav'), | 12 | $sideNav = $('.side-nav'), |
@@ -24,6 +25,7 @@ var start = 0, | @@ -24,6 +25,7 @@ var start = 0, | ||
24 | isen = true; | 25 | isen = true; |
25 | 26 | ||
26 | lazyLoad($('img.lazy')); | 27 | lazyLoad($('img.lazy')); |
28 | +noticeScroll('.notice', $('.notice').data('time') * 1000); | ||
27 | 29 | ||
28 | $('.nav-btn').on('touchstart', function() { | 30 | $('.nav-btn').on('touchstart', function() { |
29 | $sideNav.css('pointer-events', 'none'); | 31 | $sideNav.css('pointer-events', 'none'); |
@@ -3,7 +3,9 @@ | @@ -3,7 +3,9 @@ | ||
3 | * @author: bikai<kai.bi@yoho.cn> | 3 | * @author: bikai<kai.bi@yoho.cn> |
4 | * @date: 2015/11/12 | 4 | * @date: 2015/11/12 |
5 | */ | 5 | */ |
6 | -var $ = require('jquery'); | 6 | +var $ = require('jquery'), |
7 | + noticeScroll = require('../plugin/notice-scroll'); | ||
8 | + | ||
7 | var $userAvatar = $('.user-avatar'), | 9 | var $userAvatar = $('.user-avatar'), |
8 | $listItem = $('.list-item'); | 10 | $listItem = $('.list-item'); |
9 | var myImage = new Image(), | 11 | var myImage = new Image(), |
@@ -19,6 +21,8 @@ myImage.onload = function() { | @@ -19,6 +21,8 @@ myImage.onload = function() { | ||
19 | $userAvatar.css('background-image', 'url(' + avatar + ')'); | 21 | $userAvatar.css('background-image', 'url(' + avatar + ')'); |
20 | }; | 22 | }; |
21 | 23 | ||
24 | +noticeScroll('.notice', $('.notice').data('time') * 1000); | ||
25 | + | ||
22 | $('.yoho-page').on('touchstart', '.list-item, .type-item, .order-title', function() { | 26 | $('.yoho-page').on('touchstart', '.list-item, .type-item, .order-title', function() { |
23 | $listItem.removeClass('highlight'); | 27 | $listItem.removeClass('highlight'); |
24 | $(this).addClass('highlight'); | 28 | $(this).addClass('highlight'); |
static/js/plugin/notice-scroll.js
0 → 100644
1 | +/** | ||
2 | + * 公告栏目滚动 | ||
3 | + * bikai kai.bi@yoho.cn | ||
4 | + */ | ||
5 | + | ||
6 | +var $ = require('jquery'); | ||
7 | + | ||
8 | +function noticeScroll(selecter, time) { | ||
9 | + var $notice = $(selecter), | ||
10 | + $noticeItem = $notice.find('.notice-item'), | ||
11 | + count = $noticeItem.length, | ||
12 | + i = 1; | ||
13 | + | ||
14 | + selecter = selecter || '.notice'; | ||
15 | + time = time || 3000; | ||
16 | + | ||
17 | + if (count > 1) { | ||
18 | + setInterval(function() { | ||
19 | + if (i >= count) { | ||
20 | + i = 0; | ||
21 | + } | ||
22 | + $noticeItem.fadeOut(); | ||
23 | + $notice.find('.item-' + i).fadeIn(); | ||
24 | + i++; | ||
25 | + }, time); | ||
26 | + } | ||
27 | +} | ||
28 | + | ||
29 | +module.exports = noticeScroll; |
static/npm-debug.log
0 → 100644
This diff could not be displayed because it is too large.
static/sass-bak/home/_fresh-only.scss
0 → 100644
1 | +.fresh-swiper { | ||
2 | + position: relative; | ||
3 | + height: 200rem / $pxConvertRem; | ||
4 | + overflow: hidden; | ||
5 | + ul { | ||
6 | + li { | ||
7 | + float: left; | ||
8 | + width: 100%; | ||
9 | + a, img { | ||
10 | + display: block; | ||
11 | + width: 100%; | ||
12 | + height: 100%; | ||
13 | + } | ||
14 | + } | ||
15 | + } | ||
16 | + .swiper-pagination { | ||
17 | + position: absolute; | ||
18 | + left: 0; | ||
19 | + right: 0; | ||
20 | + bottom: 20rem / $pxConvertRem; | ||
21 | + text-align: center; | ||
22 | + .pagination-inner { | ||
23 | + display: inline-block; | ||
24 | + span { | ||
25 | + display: inline-block; | ||
26 | + width: 14rem / $pxConvertRem; | ||
27 | + height: 14rem / $pxConvertRem; | ||
28 | + background: #fff; | ||
29 | + opacity: 0.5; | ||
30 | + margin: 0 (9rem / $pxConvertRem); | ||
31 | + border-radius: 50%; | ||
32 | + } | ||
33 | + span.swiper-active-switch { | ||
34 | + opacity: 1; | ||
35 | + } | ||
36 | + } | ||
37 | + } | ||
38 | +} | ||
39 | + | ||
40 | +.fresh-list-swiper { | ||
41 | + overflow: hidden; | ||
42 | + padding-bottom: 15rem / $pxConvertRem; | ||
43 | + background-color: #fff; | ||
44 | + | ||
45 | + ul { | ||
46 | + box-sizing: border-box; | ||
47 | + } | ||
48 | + | ||
49 | + li { | ||
50 | + float:left; | ||
51 | + width:240rem / $pxConvertRem; | ||
52 | + margin: (20rem / $pxConvertRem) (10rem / $pxConvertRem) 0 (10rem / $pxConvertRem); | ||
53 | + | ||
54 | + &:first-child { | ||
55 | + margin-left: 20rem / $pxConvertRem; | ||
56 | + } | ||
57 | + | ||
58 | + &:last-child { | ||
59 | + margin-right: 20rem / $pxConvertRem; | ||
60 | + } | ||
61 | + | ||
62 | + .img-box { | ||
63 | + height: 100%; | ||
64 | + height:320rem / $pxConvertRem; | ||
65 | + text-align: center; | ||
66 | + position: relative; | ||
67 | + img { | ||
68 | + width: 100%; | ||
69 | + height: 100%; | ||
70 | + vertical-align: middle; | ||
71 | + } | ||
72 | + } | ||
73 | + | ||
74 | + .fresh-info { | ||
75 | + .fresh-name a{ | ||
76 | + display:block; | ||
77 | + overflow: hidden; | ||
78 | + text-overflow: ellipsis; | ||
79 | + width: 100%; | ||
80 | + white-space: nowrap; | ||
81 | + color: #444; | ||
82 | + line-height: 48rem / $pxConvertRem; | ||
83 | + font-size: 22rem / $pxConvertRem; | ||
84 | + | ||
85 | + } | ||
86 | + | ||
87 | + .cur-price { | ||
88 | + color: #d62927; | ||
89 | + font-size: 22rem / $pxConvertRem; | ||
90 | + } | ||
91 | + | ||
92 | + .old-price { | ||
93 | + margin: 0 0 0 (10rem / $pxConvertRem); | ||
94 | + color: #b0b0b0; | ||
95 | + text-decoration: line-through; | ||
96 | + font-size: 22rem / $pxConvertRem; | ||
97 | + } | ||
98 | + | ||
99 | + .fresh-icon { | ||
100 | + background: #d62927; | ||
101 | + width: 100rem / $pxConvertRem; | ||
102 | + height: 33rem / $pxConvertRem; | ||
103 | + display: block; | ||
104 | + margin: (8rem / $pxConvertRem) auto 0 auto; | ||
105 | + color: #fff; | ||
106 | + text-align: center; | ||
107 | + border-radius: 40rem / $pxConvertRem; | ||
108 | + line-height: 37rem / $pxConvertRem; | ||
109 | + font-size:12rem / $pxConvertRem; | ||
110 | + } | ||
111 | + } | ||
112 | + } | ||
113 | +} | ||
114 | + | ||
115 | +.fresh-list{ | ||
116 | + position: relative; | ||
117 | + padding:(15rem / $pxConvertRem) 0 0 (15rem / $pxConvertRem); | ||
118 | +} |
static/sass-new/home/_notice.css
0 → 100644
1 | +.notice-wrap { | ||
2 | + .trend { | ||
3 | + position: relative; | ||
4 | + box-sizing: border-box; | ||
5 | + float: left; | ||
6 | + width: 170px; | ||
7 | + height: 72px; | ||
8 | + background: resolve('img/trend.png') no-repeat center center; | ||
9 | + background-size: 90%; | ||
10 | + background-color: #fff; | ||
11 | + | ||
12 | + &:after { | ||
13 | + content: ''; | ||
14 | + position: absolute; | ||
15 | + right: 0; | ||
16 | + top: 16px; | ||
17 | + width: 1px; | ||
18 | + height: 40px; | ||
19 | + background: #eee; | ||
20 | + } | ||
21 | + } | ||
22 | + | ||
23 | + .notice { | ||
24 | + box-sizing: border-box; | ||
25 | + float: left; | ||
26 | + padding: 0 30px; | ||
27 | + background: #fff; | ||
28 | + width: 470px; | ||
29 | + height: 72px; | ||
30 | + overflow: hidden; | ||
31 | + | ||
32 | + .notice-item { | ||
33 | + display: block; | ||
34 | + width: 100%; | ||
35 | + font-size: 24px; | ||
36 | + line-height: 72px; | ||
37 | + color: #444; | ||
38 | + white-space: nowrap; | ||
39 | + overflow: hidden; | ||
40 | + text-overflow: ellipsis; | ||
41 | + } | ||
42 | + | ||
43 | + .notice-icon { | ||
44 | + display: inline-block; | ||
45 | + margin-right: 10px; | ||
46 | + width: 28px; | ||
47 | + height: 28px; | ||
48 | + background: url("/me/index/volume.png"); | ||
49 | + vertical-align: middle; | ||
50 | + } | ||
51 | + | ||
52 | + span.notice-icon { | ||
53 | + background-repeat: no-repeat !important; | ||
54 | + } | ||
55 | + } | ||
56 | +} |
-
Please register or login to post a comment