firekinger / h5-boilerplate Goto Github PK

This project forked from o2team/elf

针对微信移动web场景的动效模板脚手架，可用来制作翻页动画，各种推广宣传H5页面。包括移动端自适应（rem 或 zoom），雪碧图合并，hot reload，以及翻屏组件，重力感应，微信分享等一系列的开发库，通过webpack进行打包发布。

JavaScript 68.15% HTML 15.42% CSS 16.43%

h5-boilerplate's Introduction

H5活动脚手架

基于webpack，同时加了一些市面上比较好的公用组件库，以及自己开发定制的组件，可选择性引用，这里只需关注业务逻辑，其他的已经帮你做好了！

『 Boilerplate 主要功能』

『相关组件依赖』

Zepto 参考地址

Zepto，会默认引入，其他可根据项目需求引入

『系统配置说明』

./config/config.js 配置文件

{
    DEV:{ // 开发环境配置
        IP: 'xx.xx.xx.xx', // 可配置本机IP，默认localhost
        PROJECTPATH: 'example-inout-slider' // 项目开发路径
    },
    PRODUCTION:{ // 线上环境配置
        PUBLICPATH: 'http://l-zhi.com/',
        PROJECTPATH: 'example-inout-slider' // 项目发布路径
    }
}

// 其他可选配置项如下：
{
    TITLE:'O2-示例', // 页面标题
    PUBLICPATH: '/', // 静态资源地址，非通天塔使用参数, npm run build-ttt 忽略此参数
    NODE_ENV : process.env.NODE_ENV || 'development',
    RESPONSIVE_REM: true, //是否用rem做适配
    RESPONSIVE_ZOOM: false, //是否用Zoom做适配
    OUTPUT_PATH: 'project', // 输出项目文件名
    PORT: '3007', // 开发环境端口
    DESIGN_WIDTH: 750, // 设计稿的宽度，默认750，也可以设置其他的比如 640，设置后，可直接根据实际设计稿宽高写样式，前提是开启rem 或者 zoom 缩放
    IP:'localhost', //默认 localhost
    PUBLISH_IMAGEMIN: { // 发布的图片压缩配置
        optimizationLevel: 7, 
        interlaced: false,
        pngquant:{
            quality: "65-90",
            speed: 4
        }
    }
}

『目录结构』

.
├── project                     # build 之后目录结构
│   ├── css
│   ├── js
│   ├── plugin
│   ├── img
│   └── index.html
├── config                      # 项目配置（包括响应式开发配置）
├── src                         # 源代码
│   ├── common                  # 公用组件    
│   │   ├── css
│   │   ├── img
│   │   ├── js
│   │   └── template            # 公用模板
│   ├── example-all             # 组件示例
│   ├── example-inout-slider    # slider in-out 可以此作为开发基础模板
│   │   ├── css
│   │   ├── img
│   │   │   └── icon            # 需要合雪碧图的图片放在这里，其他图片放在根目录下
│   │   ├── js
│   │   ├── plugin              # 存放mp3 等其他资源文件
│   │   └── index.html          # html模板文件， .container 中的内容
│   └── example-threejs         # Threejs 3D 示例
│
├── webpack.base.js             # webpack基础配置文件 
├── webpack.config.dev.js       # webpack开发配置文件
└── webpack.config.build.js     # webpack构建项目配置文件

『使用说明』

开发中可直接复制 example-base 作为基础开发模板，迭代项目。

# node6.2.2 +

npm install

npm start # 项目开发

npm run build # 项目打包

PS： node-sass 可能安装会比较慢，如果不行可以用淘宝镜像。

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

『发布说明』

npm run build

发布的时候代码可以直接用 ./project （默认发布代码地址）

『演示』

下面的是各种简单示例，扫一下吧~

Examples-all:

Examples-threejs:

Examples-inout-slider:

Examples-1:

其他:

『插件列表』

webpack: is a module bundler
css-loader : css loader module for webpack
sass-loader : SASS loader for Webpack
file-loader : file loader for webpack
image-webpack-loader : Image loader module for webpack
postcss-loader : PostCSS loader for webpack
script-loader : script loader module for webpack
style-loader : style loader module for webpack
url-loader : url loader module for webpack
exports-loader : exports loader module for webpack
autoprefixer : Parse CSS and add vendor prefixes to rules by Can I Use
extract-text-webpack-plugin : Extract text from bundle into a file.
html-webpack-plugin : Simplifies creation of HTML files to serve your webpack bundles
lodash: A modern JavaScript utility library delivering modularity, performance & extras
postcss-import : PostCSS plugin to inline @import rules content
postcss-plugin-px2rem : postcss plugin px2rem
postcss-sprites : Generate sprites from stylesheets.
webpack-dev-server : The webpack-dev-server is a little node.js Express server