HTML5 活动脚手架
针对移动 web 场景的动效模板脚手架，可用来制作翻页动画，各种推广宣传 HTHML5 页面。包括移动端自适应（rem 或 zoom），雪碧图合并，样式 hot reload 等功能，通过 webpack 进行打包发布。 另外还提供翻屏，重力感应等示例项目。
安装
# 全局安装 npm install -g html5-spa-boilerplate # 创建项目目录 mkdir demo && cd demo # 初始化项目 mspa init # 查看已有示例 mspa list # 查看 help mspa --help Boilerplate 介绍
主要功能
- 页面响应式 REM px 自动转换 REM （可选）
- 页面响应式 Zoom 对需要缩放部分引用 class="__z" （可选）
- 主要针对移动端 HTML5 网页开发，并专门针对微信做了兼容
- 打包发布，快速配置
- 图片自动分组合并雪碧图
- 图片压缩
- 代码打包压缩
- 样式 hot reload
- sass
- autoprefixer
相关组件依赖
- Zepto 参考地址
Zepto，会默认引入，其他可根据项目需求引入
目录结构
.├── config │ ├── build.js # 构建配置 │ ├── default.js # 默认配置 │ └── development.js # 开发配置 ├── package.json ├── src │ ├── body.html # html body │ ├── css │ │ ├── base.css │ │ ├── loading.scss │ │ └── main.scss # 样式文件 │ ├── img│ │ └── html5-logo.png│ ├── index.template.ejs │ └── js │ ├── lib │ │ └── preloader.js │ └── main.js # 入口 js 文件 ├── webpack │ ├── build.js │ ├── webpack.base.js # webpack 基础配置文件 │ ├── webpack.config.build.js # webpack 构建项目配置文件 │ └── webpack.config.dev.js # webpack 开发配置文件 └── yarn.lock config 说明
开发配置
文件： config/development.js
TITLE: 'HTML5 SPA Boilerplate DEV' PORT: '8000' DESIGN_WIDTH: 750 配置项说明
-
TITLE
设置标题
-
PORT
开发服务器监听的端口
-
DESIGN_WIDTH
设计稿的宽度。用于计算 REM，设置了之后，样式直接使用设计稿的尺寸。 例如：设计稿的宽度是 750px，其中有个按钮是的宽度是 80px，在设置这个按钮的宽度样式时，直接按 80px 设置。
构建配置
文件： config/build.js
OUTPUT_PATH: 'dist' PUBLIC_PATH: '/'配置项说明
-
OUTPUT_PATH
构建完成后的输出目录
-
PUBLIC_PATH
静态资源的路径
默认配置
文件：config/default.js
默认配置文件提供了默认值，如果需要修改某个配置项，不要修改默认配置文件，请修改开发配置文件或者构建配置文件
TITLE: 'HTML5 SPA Boilerplate' // 页面标题 PORT: '8000' // dev server 运行的端口 DESIGN_WIDTH: 750 // 设计稿的宽度 默认750,如果开启 Zoom 则直接按照设计稿和屏幕宽度进行缩放 RESPONSIVE_REM: true // 是否用rem做适配 RESPONSIVE_ZOOM: true // 是否用Zoom做适配 NODE_ENV: processenvNODE_ENV || 'development' PROJECT_ROOT: path OUTPUT_PATH: 'dist' // build 时，生成的文件夹 PUBLIC_PATH: '/' // 静态资源路径 CSS_INTERNAL: false // build 时，样式是否内联，默认为 false；如果为 true，则将样式附加到 html header 中作为内联样式 EXTERNALS: {} PUBLISH_IMAGEMIN: // build 时，图片的压缩配置 optimizationLevel: 7 interlaced: false pngquant: quality: "65-90" speed: 4 使用说明
# 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演示
插件列表
- 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
ｂ（￣▽￣）ｄ 感谢！~