Skip to content

chenxijywc/baoxian

Repository files navigation

gulp + zepto + sui开发活动页

技术栈

运行环境

  • node:v8.0.0
  • npm: v5.0.0

测试环境

  • sit 域名:h.jia.chexiangsit.com
  • pre 域名:h.jia.chexiangpre.com
  • prd 域名:h.jia.chexiang.com

项目启动与打包

  • git clone
  • npm install
  • gulp 【启动项目】
  • gulp 命令自动生成的文件
    • static/styles 【编译后的css文件】
    • view_temp/活动名称 【编译后的html文件】
  • gulp build 【打包项目】
    • 生成dist文件

开发前准备

  • 唯一需要开发者手动修改的文件:config/index.js
  •     module.exports =  {
            gulpHdName: '20170629hd',              // 活动名称
            gulpCategory: {
                'index':  '测试首页内容',          //  index 是页面的名称, 活动标题 是 idnex.html 的title, value是标题
                'detail': '测试详情内容',          //  key 名称就是新建的页面名称  detail => detail.html
                'list': '测试列表内容'             //  list 名称就是新建的页面名称  list => list.html
            }
        };
     
  • 开发者clone项目后 请不要提交 修改的config文件
  • 其他scss 和 js 按照各自需求创建,但名称必须和gulpHdName一致
  • gulpfile.js 里 browser-sync task middleware中间键里面可以配置proxy地址

vue data 定义简述

  • basicInfo: {
       showShareFlag: false,                                        // 是否显示分享浮动按钮
       showBackTopFlag: false,                                      // 是否显示返回顶部按钮
       showDownloadFlag: !commonObj.isApp(),                        // 是否显示底部下载
       showDownloadTpl: '',                                         // 底部下载栏的中间文案模板(默认是“下载车享家app,了解更多养车秘诀”)
       linkTpl: '<a href="www.baidu.com">点击查看</a>'  // 底部下载文案和跳转路径(默认是立即下载)
       }
  • shareTxt: {                                    // 微信和app分享
                     friend: {
                         title: '拼人气,赢iPhone!8月1日车享家人气挑战即将开赛,这个盛夏的人气之星会是你么?!',
                         desc: '8月1日-8月31日邀请好友来车享家消费,将有机会赢取iPhone6s、iPad mini4、免费保养,戳我查看活动规则。',
                         link: 'https://' + url('hostname') + url('path'),
                         imgUrl: 'https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/notice/20170717hd/index/share.png?v=1'
                     },
                     friendQuan: {
                         title: '拼人气,赢iPhone!8月1日车享家人气挑战即将开赛,这个盛夏的人气之星会是你么?!',
                         desc: '8月1日-8月31日邀请好友来车享家消费,将有机会赢取iPhone6s、iPad mini4、免费保养,戳我查看活动规则。',
                         link: 'https://' + url('hostname') + url('path'),
                         imgUrl: 'https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/notice/20170717hd/index/share.png?v=1'
                     }
                 }

统一规范

  • 文件名称统一使用 _ 下划线的形式命名;
  • css 名称统一用 - 中划线形式命名;
  • id 名称统一用 驼峰式命名;
  • images 名称统一用 - 命名

eslint 规范

  • 缩进4个空格 "indent": ["error", 4, {"SwitchCase": 1}];
  • 单引号规范 "quotes": ["error", "single"];
  • 必须写分号 "semi": ["error", "always"];
  • 数组定义规范 var arr = ['1', '2', '3'] 每列前加面加空格;
  • 对象定义规范 var obj = {'key1': 'val1', 'key': 'val2] 每列前加面加空格;
  • 函数定义规则 function a() {} 花括号前加空格
  • for循环规则 for (var i = 0; i < 10; i++) {}
  • “==”替换为 “===”

项目结构

 ├── config    
 │   └── index.js                                // 活动的名称和标题配置文件
 ├── gulptask    
 │   └── index.js                                // gulp 文件入口
 ├── gulptask                                         
 │   ├── clean.js                                // 清空已编译的文件
 │   ├── html.js                                 // html编译
 │   ├── images.js                               // 图片压缩
 │   ├── sass.js                                 // sass编译和压缩
 │   └── scripts.js                              // scripts编译和压缩
 ├── static                                          
 │   ├── images                                  // 图片资源
 │   │   ├── common                              // 公用的图片                        
 │   │   │   ├── backtop.png 
 │   │   │   ├── download-icon-btn.png
 │   │   │   ├── download-icon-chexiang.png
 │   │   │   ├── download-icon-close.png
 │   │   │   └── share.png
 │   │   ├── hd_20170629                         // 当前开发活动的图片
 │   │   │   └── bg-0.png
 │   ├── plugins                                 // 常用固定不变的组件
 │   │   ├── sm                                  
 │   │   │   ├── sm.min.css
 │   │   │   └── sm.min.js
 │   │   ├── url.min.js
 │   │   └── vue.min.js
 │   │   └── vue-resource.min.js
 │   ├── scripts                                 
 │   │   ├── hd_20170612                          // 当前开发活动的脚本
 │   │   │   └── index.js                        
 │   │   └── common.js                            // 公用脚本
 │   ├── scss
 │   │   ├── base
 │   │   │   └── _reset.scss                     // reset样式  
 │   │   ├── common                                           
 │   │   │   └── _common.scss                    // 公用的样式
 │   │   ├── hd_20170612                                      
 │   │   │   └── index.scss                      // 当前活动的样式                           
 │   │   ├── helpers                                               
 │   │   │   └── _mixins.scss                    // mixins                      
 │   │   └── main.scss                           // main 
 ├── view
 │   ├── hd_20170612                             
 │   │   │   └── index.html                      // 当前开发活动的中间内容页
 │   ├── hd_20170612_temp                       
 │   │   │   └── index.html                      // 动态生成的有link 和script 和分享的完整页
 │   ├── layout                                  
 │   │   │   ├── index.html                      // 统一套用的模板页面
 │   │   │   ├── links.html                      // 样式link页面  
 │   │   │   ├── scripts.html                    // 脚本script页面
 │   │   │   └── tools.html                      // 分享,返回顶部,下载app工具栏   
 .
 ```

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published