Authored by biao

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.

  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 +});
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));

17.4 KB | W: | H:

17.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -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');
  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;
This diff could not be displayed because it is too large.
  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 +}
@@ -17,6 +17,7 @@ @@ -17,6 +17,7 @@
17 @import "hot-category"; 17 @import "hot-category";
18 @import "home-header"; 18 @import "home-header";
19 @import "thumb-row"; 19 @import "thumb-row";
  20 +@import "notice";
20 21
21 .mobile-container{ 22 .mobile-container{
22 width: 100%; 23 width: 100%;
  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 +}