专题截图：
项目截图：
目录说明:
dest/ 发布代码文件夹；
src/ 预编译代码文件夹;
node_modules node 插件;
gulpfile.js gulp的配置文件;
package.json npm 配置文件;
src/待编译文件夹:
c/ css文件目录;
i/ img文件目录;
dest/发布文件夹:
c/ css文件目录;
i/ img文件目录;
package.json 文件展示：
1 { 2 "name": "may-topic", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "autoprefixer": "^6.7.0", 13 "cssnano": "^3.10.0", 14 "cssnext": "^1.8.4", 15 "gulp": "^3.9.1", 16 "gulp-connect": "^5.0.0", 17 "gulp-imagemin": "^3.1.1", 18 "gulp-livereload": "^3.8.1", 19 "gulp-postcss": "^6.3.0", 20 "imagemin-pngquant": "^5.0.0", 21 "postcss-alias": "^1.0.0", 22 "postcss-clearfix": "^1.0.0", 23 "postcss-css-variables": "^0.6.0", 24 "postcss-mixins": "^5.4.1", 25 "postcss-nested": "^1.0.0", 26 "postcss-sass-extend": "0.0.1", 27 "precss": "^1.4.0" 28 }, 29 "dependencies": { 30 "gulp-imagemin": "^3.1.1", 31 "imagemin-pngquant": "^5.0.0" 32 } 33 }
gulpfile.js文件展示：
1 'use strict'; 2 let gulp = require('gulp'); //gulp 3 let postcss = require('gulp-postcss'); //gulp-postcss； 4 let precss = require('precss'); //postcss插件任务数组; 5 let cssnext = require('cssnext'); //未来css新语法; 6 let cssnano = require('cssnano'); //CSS优化的插件包 7 let autoprefixer = require('autoprefixer'); //添加css3 前缀; 8 let alias = require('postcss-alias'); //css 别名设置; 9 let crip = require('postcss-crip'); //css 简写; 10 let nested = require('postcss-nested'); //css 嵌套； 11 let clearfix = require('postcss-clearfix'); //css 清浮动; 12 let mixins = require('postcss-mixins'); //混合宏; 13 let extend = require('postcss-sass-extend'); //extend插件; 14 let variables = require('postcss-css-variables'); //变量插件; 15 16 /* 本地服务 */ 17 let port = 8000;//端口号; 18 let connect = require('gulp-connect'); //本地Server服务； 19 let livereload = require('gulp-livereload'); //刷新浏览器(同时chrome安装LiveReload插件);; 20 21 /* 启动服务器 */ 22 gulp.task('webserver',function(){ 23 connect.server({ 24 port : port, 25 livereload:true 26 }); 27 }); 28 29 //css处理; 30 gulp.task('css', function () { 31 32 //设置css路径; 33 let [cssSrc,cssDst] = ['./src/c/*.css','./dest/c/']; 34 35 //postcss插件数组; 36 let processors =[ 37 autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false }), 38 cssnext, 39 alias, 40 crip, 41 clearfix, 42 nested, 43 mixins, 44 variables, 45 extend, 46 cssnano 47 ]; 48 49 return gulp.src( cssSrc ) 50 .pipe(postcss(processors)) 51 .pipe( gulp.dest(cssDst) ); 52 53 }); 54 55 //HTML处理 56 gulp.task('html', function() { 57 58 //设置路径； 59 let [htmlSrc,htmlDst] = ['./src/*.html','./dest/']; 60 61 gulp.src(htmlSrc) 62 .pipe( gulp.dest(htmlDst) ) 63 .pipe(livereload()); 64 }); 65 66 //压缩图片 67 var imagemin = require('gulp-imagemin'); // 压缩图片 $ npm i -D gulp-imagemin; 68 var pngquant = require('imagemin-pngquant'); // 压缩图片 $ npm i -D imagemin-pngquant; 69 gulp.task('img', function(){ 70 71 //设置img路径; 72 let [imgSrc,imgDst] = ['./src/i/','./dest/i/']; //图片路径； 73 74 return gulp.src( imgSrc + '*.{png,jpg,gif,ico}' ) 75 .pipe(imagemin({ 76 optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） 77 progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 78 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 79 multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化 80 svgoPlugins: [ 81 {removeViewBox: false} //不要移除svg的viewbox属性 82 ], 83 use: [pngquant({quality: '65-80'})] //使用pngquant深度压缩png图片的imagemin插件/quality 压缩的比例最好60-80之间; 84 })) 85 .pipe(gulp.dest(imgDst)); 86 }); 87 88 //实时监听; 89 gulp.task('watch',function(){ 90 gulp.watch('src/c/*.css',['css']); 91 gulp.watch('src/*.html',['html']) 92 gulp.watch('src/i/*.*',['img']) 93 livereload.listen({start:true}); 94 }); 95 96 //添加默认事件; 97 gulp.task('default',function(){ 98 gulp.run('webserver','watch','html','img'); 99 });
index.html 代码(其实也没啥好看的):
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" class="html-bg"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>五一专题</title> 6 <link rel="stylesheet" href="c/index.css"> 7 <!--[if lte IE 6]> 8 <script type="text/javascript" src="http://images.miuu.cn/w4/common/j/DD_belatedPNG_0.0.8a_IE6.js"></script> 9 <script type="text/javascript"> 10 DD_belatedPNG.fix('img,.ie6-img'); 11 </script> 12 <![endif]--> 13 </head> 14 <body> 15 <div class="conter"> 16 <div class="welfare ie6-img"></div> 17 <div class="my-welfare"> 18 <div clss="my-welfareBg"></div> 19 <div class="my-wM clear"> 20 <div class="my-wl"> 21 <div class="my-wPic"> 22 <a href="#"> 23 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" width="59" height="72" /> 24 </a> 25 </div> 26 <div class="my-wPicTxt"> 27 <p> 28 我送出的桃花：1999只 29 </p> 30 <p> 31 我收到的桃花： 999只 32 </p> 33 <p> 34 我的排名：1999 35 </p> 36 </div> 37 </div> 38 <div class="my-wr"> 39 <a href="#" class="my-wrBtn ie6-img"></a> 40 </div> 41 </div> 42 </div> 43 <div class="my-sticker"> 44 <div class="my-stickerM clear"> 45 <div class="my-stl"> 46 <div class="my-stH ie6-img"> 47 多发多赢 48 </div> 49 <div class="my-stT"> 50 参与游戏可送出桃花1朵给每位收信用户，如果收信用户也参与了游戏您将收到桃花一朵，多发信才有可能多收桃花哦! 51 </div> 52 </div> 53 <div class="my-stl my-stc"> 54 <div class="my-stH ie6-img"> 55 送福利啦 56 </div> 57 <div class="my-stT"> 58 排行榜以收到桃花数计算，7日更新一次，男女会员<span class="color-red">第1名将会得到钻石会员1年＋免费体验线下xx吧一次的福利，2~5名会得到VIP一个月及免费体验一次xx吧的福利</span>，若已经是钻石会员的用户可以累计哦 59 </div> 60 </div> 61 <div class="my-stl my-str"> 62 <div class="my-stH ie6-img"> 63 参与有奖 64 </div> 65 <div class="my-stT"> 66 参与的用户均会获得50金豆/天 67 </div> 68 </div> 69 </div> 70 </div> 71 <div class="pink-bg my-chartMain"> 72 <div class="my-chartLine"> 73 <div class="my-line1"></div> 74 <div class="my-line2"></div> 75 <div class="chartLine "> 76 上期获奖名单 77 </div> 78 <div class="my-line3"></div> 79 <div class="my-line4"></div> 80 </div> 81 <div class="my-period"> 82 <span class="color-yellow">恭喜</span>用户男1和用户女1<span class="color-yellow">获得钻石会员＋xx吧免费体验一次</span><br/> 83 <span class="color-yellow">恭喜</span>， 84 用户男2，用户男3，用户男4，用户男5,用户女2，用户女3，用户女4，用户女5 <span class="color-yellow">获得VIP一个月＋xx吧免费体验一次</span> 85 </div> 86 </div> 87 <div class="pink-bg my-chartMain"> 88 <div class="strange-flower1 ie6-img"></div> 89 <div class="strange-flower2 ie6-img"></div> 90 <div class="my-chartLine"> 91 <div class="my-line1"></div> 92 <div class="my-line2"></div> 93 <div class="chartLine"> 94 <div class="chartLineflower1 ie6-img"></div> 95 <div class="chartLineflower2 ie6-img"></div> 96 桃花排行榜 97 </div> 98 <div class="my-line3"></div> 99 <div class="my-line4"></div> 100 </div> 101 <div class="my-welList clear"> 102 <div class="my-well"> 103 <div class="my-pinkLine ie6-img"> 104 男会员 105 </div> 106 <div class="lists"> 107 <div class="my-li clear"> 108 <div class="flowerOne"> 109 <div class="flowerTxt"> 110 1 111 </div> 112 <div class="flowerOne-top ie6-img ie6-img"></div> 113 <div class="flowerOne-bottom ie6-img ie6-img"></div> 114 </div> 115 <div class="my-lil"> 116 <div class="my-lilPic"> 117 <a href="#" class="my-lilPicM"> 118 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 119 <span> 120 1000+ 121 </span> 122 </a> 123 <a href="#" class="my-lilPicA"> 124 会员 125 </a> 126 </div> 127 </div> 128 <div class="my-lir"> 129 <p> 130 28岁 176厘米 131 </p> 132 <p> 133 北京门头沟 134 </p> 135 <p> 136 10000～20000元 137 </p> 138 <div class="btn-m"> 139 <a href="#" class="btn">写 信</a> 140 </div> 141 </div> 142 </div> 143 <div class="my-li clear"> 144 <div class="flowers"> 145 <div class="flowersTxt"> 146 2 147 </div> 148 <div class="flowers-top"></div> 149 <div class="flowers-bottom"></div> 150 </div> 151 <div class="my-lil"> 152 <div class="my-lilPic"> 153 <a href="#" class="my-lilPicM"> 154 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 155 <span> 156 1000+ 157 </span> 158 </a> 159 <a href="#" class="my-lilPicA"> 160 会员 161 </a> 162 </div> 163 </div> 164 <div class="my-lir"> 165 <p> 166 28岁 176厘米 167 </p> 168 <p> 169 北京门头沟 170 </p> 171 <p> 172 10000～20000元 173 </p> 174 <div class="btn-m"> 175 <a href="#" class="btn">写 信</a> 176 </div> 177 </div> 178 </div> 179 <div class="my-li clear"> 180 <div class="flowers"> 181 <div class="flowersTxt"> 182 3 183 </div> 184 <div class="flowers-top"></div> 185 <div class="flowers-bottom"></div> 186 </div> 187 <div class="my-lil"> 188 <div class="my-lilPic"> 189 <a href="#" class="my-lilPicM"> 190 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 191 <span> 192 1000+ 193 </span> 194 </a> 195 <a href="#" class="my-lilPicA"> 196 会员 197 </a> 198 </div> 199 </div> 200 <div class="my-lir"> 201 <p> 202 28岁 176厘米 203 </p> 204 <p> 205 北京门头沟 206 </p> 207 <p> 208 10000～20000元 209 </p> 210 <div class="btn-m"> 211 <a href="#" class="btn">写 信</a> 212 </div> 213 </div> 214 </div> 215 <div class="my-li clear"> 216 <div class="flowers"> 217 <div class="flowersTxt"> 218 4 219 </div> 220 <div class="flowers-top"></div> 221 <div class="flowers-bottom"></div> 222 </div> 223 <div class="my-lil"> 224 <div class="my-lilPic"> 225 <a href="#" class="my-lilPicM"> 226 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 227 <span> 228 1000+ 229 </span> 230 </a> 231 <a href="#" class="my-lilPicA"> 232 会员 233 </a> 234 </div> 235 </div> 236 <div class="my-lir"> 237 <p> 238 28岁 176厘米 239 </p> 240 <p> 241 北京门头沟 242 </p> 243 <p> 244 10000～20000元 245 </p> 246 <div class="btn-m"> 247 <a href="#" class="btn">写 信</a> 248 </div> 249 </div> 250 </div> 251 <div class="my-li clear"> 252 <div class="flowers"> 253 <div class="flowersTxt"> 254 5 255 </div> 256 <div class="flowers-top"></div> 257 <div class="flowers-bottom"></div> 258 </div> 259 <div class="my-lil"> 260 <div class="my-lilPic"> 261 <a href="#" class="my-lilPicM"> 262 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 263 <span> 264 1000+ 265 </span> 266 </a> 267 <a href="#" class="my-lilPicA"> 268 会员 269 </a> 270 </div> 271 </div> 272 <div class="my-lir"> 273 <p> 274 28岁 176厘米 275 </p> 276 <p> 277 北京门头沟 278 </p> 279 <p> 280 10000～20000元 281 </p> 282 <div class="btn-m"> 283 <a href="#" class="btn">写 信</a> 284 </div> 285 </div> 286 </div> 287 </div> 288 </div> 289 <div class="my-welr"> 290 <div class="my-pinkLine ie6-img"> 291 女会员 292 </div> 293 <div class="lists"> 294 <div class="my-li clear"> 295 <div class="flowerOne"> 296 <div class="flowerTxt"> 297 1 298 </div> 299 <div class="flowerOne-top ie6-img"></div> 300 <div class="flowerOne-bottom ie6-img"></div> 301 </div> 302 <div class="my-lil"> 303 <div class="my-lilPic"> 304 <a href="#" class="my-lilPicM"> 305 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 306 <span> 307 1000+ 308 </span> 309 </a> 310 <a href="#" class="my-lilPicA"> 311 会员 312 </a> 313 </div> 314 </div> 315 <div class="my-lir"> 316 <p> 317 28岁 176厘米 318 </p> 319 <p> 320 北京门头沟 321 </p> 322 <p> 323 10000～20000元 324 </p> 325 <div class="btn-m"> 326 <a href="#" class="btn">写 信</a> 327 </div> 328 </div> 329 </div> 330 <div class="my-li clear"> 331 <div class="flowers"> 332 <div class="flowersTxt"> 333 2 334 </div> 335 <div class="flowers-top"></div> 336 <div class="flowers-bottom"></div> 337 </div> 338 <div class="my-lil"> 339 <div class="my-lilPic"> 340 <a href="#" class="my-lilPicM"> 341 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 342 <span> 343 1000+ 344 </span> 345 </a> 346 <a href="#" class="my-lilPicA"> 347 会员 348 </a> 349 </div> 350 </div> 351 <div class="my-lir"> 352 <p> 353 28岁 176厘米 354 </p> 355 <p> 356 北京门头沟 357 </p> 358 <p> 359 10000～20000元 360 </p> 361 <div class="btn-m"> 362 <a href="#" class="btn">写 信</a> 363 </div> 364 </div> 365 </div> 366 <div class="my-li clear"> 367 <div class="flowers"> 368 <div class="flowersTxt"> 369 3 370 </div> 371 <div class="flowers-top"></div> 372 <div class="flowers-bottom"></div> 373 </div> 374 <div class="my-lil"> 375 <div class="my-lilPic"> 376 <a href="#" class="my-lilPicM"> 377 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 378 <span> 379 1000+ 380 </span> 381 </a> 382 <a href="#" class="my-lilPicA"> 383 会员 384 </a> 385 </div> 386 </div> 387 <div class="my-lir"> 388 <p> 389 28岁 176厘米 390 </p> 391 <p> 392 北京门头沟 393 </p> 394 <p> 395 10000～20000元 396 </p> 397 <div class="btn-m"> 398 <a href="#" class="btn">写 信</a> 399 </div> 400 </div> 401 </div> 402 <div class="my-li clear"> 403 <div class="flowers"> 404 <div class="flowersTxt"> 405 4 406 </div> 407 <div class="flowers-top"></div> 408 <div class="flowers-bottom"></div> 409 </div> 410 <div class="my-lil"> 411 <div class="my-lilPic"> 412 <a href="#" class="my-lilPicM"> 413 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 414 <span> 415 1000+ 416 </span> 417 </a> 418 <a href="#" class="my-lilPicA"> 419 会员 420 </a> 421 </div> 422 </div> 423 <div class="my-lir"> 424 <p> 425 28岁 176厘米 426 </p> 427 <p> 428 北京门头沟 429 </p> 430 <p> 431 10000～20000元 432 </p> 433 <div class="btn-m"> 434 <a href="#" class="btn">写 信</a> 435 </div> 436 </div> 437 </div> 438 <div class="my-li clear"> 439 <div class="flowers"> 440 <div class="flowersTxt"> 441 5 442 </div> 443 <div class="flowers-top"></div> 444 <div class="flowers-bottom"></div> 445 </div> 446 <div class="my-lil"> 447 <div class="my-lilPic"> 448 <a href="#" class="my-lilPicM"> 449 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 450 <span> 451 1000+ 452 </span> 453 </a> 454 <a href="#" class="my-lilPicA"> 455 会员 456 </a> 457 </div> 458 </div> 459 <div class="my-lir"> 460 <p> 461 28岁 176厘米 462 </p> 463 <p> 464 北京门头沟 465 </p> 466 <p> 467 10000～20000元 468 </p> 469 <div class="btn-m"> 470 <a href="#" class="btn">写 信</a> 471 </div> 472 </div> 473 </div> 474 </div> 475 </div> 476 </div> 477 </div> 478 <div class="legend-welfare"> 479 <div class="strange-flower3 ie6-img"></div> 480 <h2> 481 活动说明 482 </h2> 483 <p> 484 1. 活动有效期内每7日更新一次排名，更新前保持第一名男女用户均会得到钻石会员1年＋xx吧免费<br/> 体验一次的福利，若已经是钻石会员的用户，将会再累计一年； 485 </p> 486 <p> 487 2. 2~5名用户均会得到VIP一个月的福利＋xx吧免费体验一次 488 </p> 489 <p> 490 3. 每日参与用户均会得到50金豆一次； 491 </p> 492 <p> 493 4. 用户发送桃花信，除收信方会收到一朵桃花外，若收信方也参与了游戏，发信方也会收到一朵桃花； 494 </p> 495 <p> 496 5. 排行榜更新后，前一期福利3个工作日内以站内信形式送出； 497 </p> 498 </div> 499 </div> 500 </body> 501 </html>